针对单独入口点的Webpack 4优化

时间:2018-06-20 09:25:17

标签: javascript webpack ecmascript-6 webpack-4

我有一个common Webpack配置,并且有prod和'identityServer'单独的配置来构建两个入口点。我在我的“公共”配置中使用CleanWebpackPlugin来清理dist,但在identityServer中不需要它。另外,我使用webpack-merge合并两个配置。

脚本:

 "build": "webpack --colors --config webpack/prod.js && webpack --config webpack/identityServer.js &&   cpx \"dist/**/*\" ../Ui --clean",

common.js

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: './src/main.js',
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
    ],
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
    },
    module: {
        rules:[
           ...some rules
        ],
    },
    performance: {hints: false},
    optimization: {splitChunks:{chunks: 'all'}},
}

prod.js

module.exports = merge(common, {
    mode: 'production',
    devtool: false,
    stats: 'minimal',
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
    ],
})

identityServer.js

const templates = {
    index: {excludeChunks: ['identityServerModel']},
    logout: {
        excludeChunks: ['main'],
        chunks: ['identityServerModel'],
        inject: 'head',
    },
    error: {
        excludeChunks: ['main'],
        chunks: ['identityServerModel'],
    },
}

const entryHtmlPlugins = Object.keys(templates).map(template => new HtmlWebpackPlugin({
    template: `./src/components/loginPage/${template}.ejs`,
    filename: `${template}.html`,
    hash: true,
    ...templates[template],
}))

module.exports = merge(common, {
    mode: 'production',
    devtool: false,
    stats: 'minimal',
    entry: {
        identityServerModel: './src/components/loginPage/identityServerModel.js',
        main: './src/components/loginPage/login.js',
    },
    plugins: entryHtmlPlugins,
    output: {
        filename: '../[name].[chunkhash].js',
        path: path.resolve(__dirname, '../dist/login'),
        publicPath: '/',
    },
})

干净dist两次的问题,因为我的脚本在prod.jsidentity.js中常见的脚本合并运行两次。实际上,我已将其修复,仅在prod中添加cleanwebpack插件。但是我想离开common,因为我通常使用dev, prod, identity配置。

0 个答案:

没有答案