Izzei -'s questions

假设有一个 npm 包"view-engine"。在导入Engine:对象的情况下，如果我们正在导入的文件位于与模式不匹配的路径上，则
import { Engine } from "view-engine";应该引发错误，例如： .Engine**/model/index.ts

这是一个示例代码：

#wrapper {
  display: flex;
  width: 200px;
  
}

#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: left top;
}

#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
}

<div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

元素的初始位置：

应用变换后的放置：缩放

如您所见，元素发生了变化。如何防止这种情况？如何在不改变位置的情况下调整元素的大小？

任何类型的路径都将转换为以斜线开头的路径，例如 /img/1.jpg。因此，所有路径都不起作用，我在控制台中看到一个错误：“ERR_FILE_NOT_FOUND”，如果用 ./ 替换路径的开头，那么一切正常。朋友们！请帮助解决这个问题。

// index.js
import './index.html'
import './index.scss'

// webpack.config.js
    context: path.resolve(__dirname, 'src'),
    entry: ['./index.js'],
    output: {
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            minify: isProd,
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtrackPlugin({
            filename: '[hash].css'
        })
    ],
    devServer: {
        port: 3000,
        hot: isDev,
        historyApiFallback: true
    },
    optimization: optimization(),
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /.html$/,
                loader: 'html-loader',
                options: {
                    attributes: {
                      root: '.',
                    }
                }
            },

            {
                test: /.scss$/,
                use: [
                    {
                        loader: MiniCssExtrackPlugin.loader,
                        options: {
                            hmr: isDev,
                            reloadAll: true,
                        },
                    },
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[hash].[ext]',
                            outputPath: './img',
                            useRelativePath: true
                        }
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 75
                            }
                        }
                    }
                ]
            },

以这种布局为例，您希望 .header__hero-text 居中，而其余的 header__container 元素位于该容器的边缘。

       <header className='header'>
            <div className='header__container'>
                <div className='header__links-wrapper'>
                    <a className='header__link'>Link 1</a>
                    <a className='header__link'>Link 2</a>
                    <a className='header__link'>Link 3</a>
                    <a className='header__link'>Link 4</a>
                </div>
                <p className='header__hero-text'>91 DAYS</p>
                <p className='header__action'>watch</p>
            </div>
        </header>