Webpack 4 - 使用SplitChunksPlugin从CommonsChunkPlugin迁移

Question

Webpack 4 - 使用SplitChunksPlugin从CommonsChunkPlugin迁移

kim*_*gro 10 commonschunkplugin webpack-4 splitchunksplugin

我们有一个传统的服务器渲染应用程序(非SPA),其中每个页面都增加了vuejs

现有的webpack 3配置是

webpack.config.js

var webpack = require('webpack')
var path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: {
        shared: './shared.js',
        pageA: './pageA.js',
        // pageB: './pageB.js',
        // pageC: './pageC.js',
        // etc
    },

    resolve: {
        alias: { vue: 'vue/dist/vue.esm.js' },
    },

    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                sourceMap: true,
                            },
                        },
                    ],
                }),
            },
        ],
    },

    plugins: [
        new CleanWebpackPlugin('./dist'),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['shared'],
            minChunks: Infinity,
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime',
        }),

        new ExtractTextPlugin('[name].css'),

        new CopyWebpackPlugin([{ from: 'index.html', to: '.' }]),
    ],
}

Run Code Online (Sandbox Code Playgroud)

shared.js

// import shared dependencies & pollyfills
var vue = require('vue')

// import global site css file
require('./shared.css')

// initialize global defaults
// vue.setDefaults(...)

console.log('shared', { vue })

Run Code Online (Sandbox Code Playgroud)

pageA.js

var vue = require('vue')

// only this page uses axios
var axios = require('axios')

console.log('pageA', { vue, axios })

Run Code Online (Sandbox Code Playgroud)

shared.css

body {
    background-color: aquamarine;
}

Run Code Online (Sandbox Code Playgroud)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- included on every page-->
    <link rel="stylesheet" href="shared.css">
</head>
<body>
    <!-- included on every page-->
    <script src="runtime.js"></script>
    <script src="shared.js"></script>

    <script src="pageA.js"></script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

有了这个设置

1)runtime.js包含webpack加载器,因此任何更改shared.js都不会导致pageA.js缓存被破坏,反之亦然

2)shared.js包含任何共享依赖项(在本例中vue)以及每个页面的任何共享全局初始化(设置vue默认值等).他还指出我们导入了共享的全局css文件.

3)pageA.js不包含在shared.js(vue在这种情况下)导入的任何依赖项,但确实包含它导入的依赖项(axios在本例中).

我们无法使用.重现此设置 SplitChunksPlugin

1)SplitChunksPlugin似乎不允许将入口点作为分裂点.

2)所有示例都将所有节点模块依赖项拆分为供应商块.这对我们不起作用,因为我们有100个页面,但只有少数导入图形库或时刻等.我们不希望将此图形库或时刻包含在内,shared.js因为它将为所有页面加载.

3)不清楚如何将运行时分成它自己的文件

SplitChunksPlugin似乎是针对SPA的,可以按需加载javascript.我们正在追踪的情景是否仍然受到支持？

Answer 1

Eli*_*son 3

您是否正在尝试迁移到 webpack 4？

我发现optimisation cacheGroups test option具体说明什么去哪里很有效。

optimization: {
  splitChunks: {
    cacheGroups: {
      shared: {
        test: /node_modules[\\/](?!axios)/,
        name: "shared",
        enforce: true,
        chunks: "all"
      }
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

将从节点模块（axios 除外）加载所有内容，因此应作为页面入口点的一部分包含在内。

归档时间：	7 年，8 月前
查看次数：	1292 次
最近记录：	6 年，7 月前