详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在）...

最新推荐文章于 2020-11-29 05:58:14 发布

weixin_33721427

最新推荐文章于 2020-11-29 05:58:14 发布

阅读量244

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/raind/p/8595439.html

版权

Webpack 的 CommonsChunkPlugin 插件，负责将多次被使用的 JS 模块打包在一起。

CommonsChunkPlugin 能解决的问题

在使用插件前，考虑几个问题：

对哪些 chunk 进行提取，这决定了 chunks ，children 和 name 要怎么配置
common chunk 是否异步，这决定了 async 怎么配置
common chunk 的粒度，这决定了 minChunks 和 minSize 怎么配置

以下是官方给出的常用的场景：

提取两个及两个以上 Chunk 的公共代码
将 Code Split 切割出来的 Chunk「就是子 Chunk」，提取到父 Chunk
将 Code Split 切割出来的 Chunk，提取到一个新的异步加载的 Chunk
提取某个类似 jquery 或 react 的代码库

前面我们实现了多页面分离资源引用,按需引用JS和css

但有一个问题：最后生成的3个js，都有重复代码，我们应该把这部分公共代码单独提取出来。

方式一，传入字符串参数

new webpack.optimize.CommonsChunkPlugin(‘common.js'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js

 
          var 
          HtmlWebpackPlugin = require( 
          'html-webpack-plugin' 
          ); 
         
          var 
          webpack = require( 
          'webpack' 
          ); 
         
          var 
          extractTextPlugin = require( 
          'extract-text-webpack-plugin' 
          ); 
         
          module.exports = { 
         
          // entry是入口文件，可以多个，代表要编译那些js 
         
          //entry:['./src/main.js','./src/login.js','./src/reg.js'], 
         
          entry: 
         
          { 
         
          'main' 
          : 
          './src/main.js' 
          , 
         
          'user' 
          :[ 
          './src/login.js' 
          , 
          './src/reg.js' 
          ], 
         
          'index' 
          :[ 
          './src/index.js' 
          ] 
         
          }, 
         
          externals:{ 
         
          'jquery' 
          : 
          'jQuery' 
         
          }, 
         
          module:{ 
         
          loaders:[ 
         
          // {test:/\.css$/,loader:'style-loader!css-loader'}, 
         
          {test:/\.css$/,loader:extractTextPlugin.extract( 
          'style' 
          , 
          'css' 
          )} 
         
          ], 
         
          }, 
         
          output:{ 
         
          path: __dirname+ 
          '/build/js' 
          ,  
          // 输出到那个目录下（__dirname当前项目目录） 
         
          filename: 
          '[name].js' 
          //最终打包生产的文件名 
         
          }, 
         
          plugins:[ 
         
          new 
          HtmlWebpackPlugin({ 
         
          filename: __dirname+ 
          '/build/html/login-build.html' 
          , 
         
          template:__dirname+ 
          '/src/tpl/login.html' 
          , 
         
          inject: 
          'body' 
          , 
         
          hash: 
          true 
          , 
         
          chunks:[ 
          'main' 
          , 
          'user' 
          , 
          'common.js' 
          ]   
          // 这个模板对应上面那个节点 
         
          }), 
         
          new 
          HtmlWebpackPlugin({ 
         
          filename: __dirname+ 
          '/build/html/index-build.html' 
          , 
         
          template:__dirname+ 
          '/src/tpl/index.html' 
          , 
         
          inject: 
          'body' 
          , 
         
          hash: 
          true 
          , 
         
          chunks:[ 
          'index' 
          , 
          'common.js' 
          ]   
          // 这个模板对应上面那个节点 
         
          }), 
         
          // css抽取 
         
          new 
          extractTextPlugin( 
          "[name].css" 
          ), 
         
          // 提供公共代码 
         
          new 
          webpack.optimize.CommonsChunkPlugin( 
          'common.js' 
          ),  
          // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 
         
          ] 
         
          };

方式二，有选择的提取公共代码

 
          // 提供公共代码 
         
          // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 
         
          // 只提取main节点和index节点 
         
          new 
          webpack.optimize.CommonsChunkPlugin( 
          'common.js' 
          ,[ 
          'main' 
          , 
          'index' 
          ]),