Question

在我尝试从webpack 3切换到4时，我使用简化的配置，如下面的摘录。构建是成功的，但生成一些只有一个文件名的块，我似乎无法理解为什么？

0.css   12.5 KiB                             0  [emitted]
 0.js    312 KiB                             0  [emitted]
 1.js   90.3 KiB                             1  [emitted]
 2.js    109 KiB                             2  [emitted]
 3.js    647 KiB                             3  [emitted]
 4.js   1.14 MiB                             4  [emitted]
5.css   33.5 KiB                             5  [emitted]
 5.js   1.56 MiB                             5  [emitted]
6.css  602 bytes                             6  [emitted]
 6.js   92.8 KiB                             6  [emitted]

配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function (env, options) {
    const PRODUCTION = options.mode === 'production';

    return {
        entry: {
            common: ['libA', 'libB', './common/A.js', './common/A.js', /* ... */],
            pageA: ['./src/pageA/file1.js', './src/pageA/file2.js', /* ... */],
            pageB: ['./src/pageB/file1.js', './src/pageB/file2.js', /* ... */],
            /* ... */
        },
        output: {
            path: path.resolve('./dist'),
            filename: `[name]${PRODUCTION ? '.min' : ''}.js`,
            chunkFilename: `[name]${PRODUCTION ? '.min' : ''}.js`,
            libraryTarget: 'var'
        },
        module: {
            rules: [
                {
                    test: /\.js$/i,
                    include: /src/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.css$/i,
                    include: /src/,
                    exclude: /node_modules/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: false,
                                importLoaders: 1
                            }
                        }
                    ]
                },
                /* ... */
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: `[name].${PRODUCTION ? 'min.css' : 'css'}`,
                chunkFilename: `[name].${PRODUCTION ? 'min.css' : 'css'}`
            })
        ],
        optimization: {
            splitChunks: {
                chunks: 'initial',
                name: false,
                cacheGroups: {
                    common: {
                        test: true,
                        name: 'common',
                        chunks: 'initial',
                        minSize: 0,
                        minChunks: 10,
                        reuseExistingChunk: true,
                        enforce: true
                    }
                }
            }
        }
    };
};

Answer 1

每个x.js文件都是通过代码中的动态导入创建的。

Webpack支持import()＆amp; require.ensure()语法。

它们都支持块命名：

import() - 发表评论

import(/* webpackChunkName: "my-chunk-name" */ 'my-comp');

require.ensure() - 指定第4个参数

require.ensure(['b'], function(require) {
   var c = require('c');
}, console.error, 'chunkName');
-----------------------^

Answer 2

我在使用以下语法进行Vue.js编译时遇到了相同的问题：

  export default {
    ...
    components: {
      loader: () => import('../loader')
    },
    ...
  }

我通过如下修改对其进行了修复：

import Loader from '../loader';

export default {
    ...
    components: {
      loader: Loader
    },
    ...
}

注意：如果它来自外部库，则必须找到其他解决方案

为什么webpack 4会生成名为0.js，1.js 2.js的文件？

2 个答案: