Webpack: Should not only extract vendor JS files

Created on 13 Nov 2016 · 7Comments · Source: vuejs-templates/webpack

Currently, the CommonsChunkPlugin will only extract JS, is there any particular reason to do so?
Extract vendor CSS files just the same way as JS will be good.

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) && // This seems unnecessary
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

Source

zhangxin840

Most helpful comment

@jamesjieye try change /\.js$/ to /\.(js|css)$/ in the minChunks function.

lmk123 on 11 Dec 2016

👍2

All 7 comments

You can extract vendor's CSS to a separate file. For example, if you add install bootstrap via npm install bootstrap --save and then add change the entry in webpack.base.conf.js to the following

  entry: {
    app: './src/main.js',
    style: ['bootstrap/dist/css/bootstrap.css']
  },

And after run npm run build, you will get bootstrap css extracted to style.***.css and the generated index.html looks like this.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>vue2-test</title>
  <link href=/static/css/app.9f3126d1020a92a1452087ee86466a89.css rel=stylesheet>
  <link href=/static/css/style.cbdcc089559c4313a6b58e73fbff6ae6.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=/static/js/manifest.570d754ea257d8a23a41.js></script>
<script type=text/javascript src=/static/js/vendor.5e94dd09dd36320829c1.js></script>
<script type=text/javascript src=/static/js/app.93f6391f3f647f5d7ae9.js></script>
<script type=text/javascript src=/static/js/style.2631fa881c600f1dcfad.js></script>
</body>
</html>

However, for me, the problem is that, the vendor's css is placed after the application's css. Still researching how to fix that.

jamesjieye on 19 Nov 2016

😄1

Figured out a way to move the style.***.css before app.***.css. In webpack.prod.conf.js, change the HtmlWebpackPlugin to the following.

    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      // adding a unique webpack compilation hash to all the included scripts and css files.
      hash: false,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // Use custom ordering for chunks
      chunksSortMode: function (chunk1, chunk2) {
        var orders = ['manifest', 'style', 'vendor', 'app'];
        var order1 = orders.indexOf(chunk1.names[0]);        
        var order2 = orders.indexOf(chunk2.names[0]);
        if (order1 > order2) {
          return 1;
        } else if (order1 < order2) {
          return -1;
        } else {
          return 0;
        }
      }
    })

Now, what is left to do is to find a way to skip style.****.js from being injected, even though it doesn't do any harm.

jamesjieye on 19 Nov 2016

Just finished an example with extracted vendor css and excluded style.[chunkhash].js file.

https://github.com/jamesjieye/vue2-example

jamesjieye on 19 Nov 2016

@jamesjieye Tanks for your answer. Adding a style property in entry may solve the problem. But I think just remove the file type check in minChunks will be better, because you do not need to add anything explicitly.

zhangxin840 on 20 Nov 2016

@zhangxin840 Do you have an example with only change the minChunks?

jamesjieye on 20 Nov 2016

@jamesjieye try change /\.js$/ to /\.(js|css)$/ in the minChunks function.

lmk123 on 11 Dec 2016

👍2

Close (inactivity)

In webpack 2.2 based, support css extracting via ExtractTextPlugin.