Question

我在使用webpack和grunt的网站上有多个子页面。这是我的Gruntfile.js中的webpack配置。

我想使用webpack来处理所有子页面JS文件。

    webpack: {
        dev: {
            entry: {
                test: "./src/js/test.js",
                index: "./src/js/index.js",
            },
            output: {
                path: 'dist/js/',
                filename: '[name].js',
                chunkFilename: '[id].[hash].chunk.js',
                publicPath: 'js/'
            },
            plugins: [
                new webpack.SourceMapDevToolPlugin('[file].map', null, '[absolute-resource-path]', '[absolute-resource-path]')
            ]
        },
        prod: {
            entry: {
                test: "./src/js/test.js",
                index: "./src/js/index.js",
            },
            output: {
                path: 'dist/js/',
                filename: '[name].js',
                chunkFilename: '[id].[hash].chunk.js',
                publicPath: 'js/'
            },
            plugins: [
                new webpack.optimize.UglifyJsPlugin()
            ]
        }
    },

在指定条目名称时是否可以使用通配符？那么js /文件夹中的任何文件都被认为是一个入口点？另外，我是否正确配置了webpack？为什么需要chunkFileName？这似乎创建了不必要的JavaScript。另外，如何处理所有子页面都有通用JS的情况？某些子页面有特定的JS文件，所有子页面都有一个通用的JS文件。

Answer 1

我们也设置了多个入口点。

在指定条目名称时是否可以使用通配符？所以 js /文件夹中的任何文件都被视为入口点？

这是节点，你可以使用fs或任何你想要列出文件的东西，并按照你喜欢的任何惯例创建一个入口点对象。

另外，我正在正确配置webpack吗？

嗯，这取决于你想做什么...... 我没有看到任何加载器，因此你不对文件进行转换（如babel）。

为什么需要chunkFileName？这似乎创造了不必要的的JavaScript。

我不使用它。

此外，我如何处理所有人都有共同JS的情况子页面？某些子页面有特定的JS文件，并且有一个共同的所有子页面的JS文件。

您可以使用CommonsChunkPlugin在页面之间进行相互代码。 https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code

使用webpack的多个子页面

1 个答案: