Question

我们有一个传统的服务器呈现的应用程序（非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: '.' }]),
    ],
}

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 })

pageA.js

var vue = require('vue')

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

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

shared.css

body {
    background-color: aquamarine;
}

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>

使用此设置

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

2）shared.js包含任何共享的依赖项（在这种情况下为vue）以及每个页面的任何共享的全局初始化（设置vue默认值等）。他也指出我们导入了共享的全局CSS文件。

3）pageA.js不包含在shared.js中导入的任何依赖项（在这种情况下为vue，但确实包含其导入的依赖项（在这种情况下为axios）。< / p>

我们无法使用SplitChunksPlugin

复制此设置

1）SplitChunksPlugin似乎不允许将入口点作为分割点。

2）所有示例都将所有节点模块依赖项划分为一个供应商块。这对我们不起作用，因为我们有100多个页面，但是只有少数几个页面导入图形库或矩等。我们不希望将此图形库或矩包含在shared.js中，因为那样会加载所有页面。

3）不清楚如何将运行时拆分为自己的文件

SplitChunksPlugin似乎是针对SPA的，可以在其中按需加载javascript。我们正在悲剧的场景是否仍然受支持？

Answer 1

您是否要迁移到Webpack 4？

我发现optimisation cacheGroups test option可以很好地说明去哪里。

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

将从节点模块（axios除外）中加载所有内容，因此应将其包含在页面入口点中。

Answer 2

如果您希望Webpack对某些组件进行分块，则需要从主条目文件中异步导入它。我一直在使用bundle-loader来做到这一点，然后有：

在我的webpack.config.js中

optimization: {
  splitChunks: {
    chunks: 'all'
  },
  mergeDuplicateChunks: true,
}
module: {
  rules: [
    {
      test: /\.bundle\.js$/, //yes my output file contains the bundle in its name
      use: {
        loader: 'bundle-loader', options: {lazy: true}
      }
    }
  ]
}

在我的输入文件中。

//this code will replace the line where you are importing this component
let Login;

// this method will go inside your component
componentWillMount() {
    require("bundle-loader!./ui/Login.jsx")((loginFile) => {
        Login = loginFile.default;
        this.setState({ loginLoaded: true });
    });
}

如果您不想使用它，可以使用更多方法异步导入文件。

Webpack 4-使用SplitChunksPlugin从CommonsChunkPlugin迁移

2 个答案: