入门webpack（五）打包公共代码

打包插件：CommonsChunkPlugin
插件中文网站 || 插件英文官网

如何使用

//安装webpack
//webpack.config.js文件中引入webpack模块
// 关于options具体信息请参考官网
cnpm install webpack --save-dev //安装webpack
var Webpack = require('webpack')
plugins =[ new Webpack.optimize.CommonsChunkPlugin(options)]

options详细说明

实例
新建test文件夹，在test文件下打开工具git bash输入 npm install webpack --save-dev ,test文件夹下新建下图文件，其中nodule_modules是安装webpack自动生成的。

实例1.打包单entry入口

// pageOne.js
import childPageOne from './childPageOne'
import childPageTwo from './childPageTwo'
export default 'pageOne'

//childPageOne.js
import moduleTest from './moduleTest'
export default 'moduleTest'

//childPageTwo.js
import moduleTest from './moduleTest'
export default 'moduleTest'

//moduleTest.js
export default 'moduleTest'

//webpack.config.js
var Webpack = require('webpack')
var path = require('path')
module.exports = {
    entry: {
        pageOne: './src/pageOne'
    },
    output: {
        path: resolve(__dirname, './dist')
        filename: '[name].bundle.js'
    }
    plugins: [ 
        new Webpack.optimize.CommonsChunkPlugin({
              name: 'common',
              minChunks: 2
        }]
}

pageA引入两个子模块，而childPageOne和childPageTwo又用到了moduleTest,我们希望把公共的模块moduleTest单独提取出来。
git bash: webpack看下打包后的结果。
在dist目录下看pageOne.bundle.js可以看到公共模块moduleTest并没有被打包成单独的模块。
这里写图片描述

这是为什么呢？我们来看下配置文件，只有一个entry，当项目只有单entry时是无法提取公共代码的，（注意这并不意味着webpack不能对SPA进行公共代码提取。）

实例2
src目录下新增pageTwo.js

// pageTwo.js
import './childPageOne'
import './childPageTwo'
export default 'pageTwo'

修改配置文件新增一个entry入口

扫描二维码关注公众号，回复： 922987 查看本文章

//webpack.config.js
entry: {
    pageOne: './src/pageOne',
    pageTwo: './src/pageTwo'
}

打包并分析
dist目录下生成三个文件分别是pageOne.bundle.js,pageTwo.bundle.js,comon.bundle.js ,在pageOne.bundle.js和pageTwo.bundle.js中我们可以看到module_test和childPageOne,childPageTwo没有了，已经放到common.bundle.js中。这说明公共代码提取成功。

这里写图片描述

接下来我们要做的一件事就是修改配置文件，将minChunks由2变为3,告诉打包插件，只有公用模块三次及以上才被打包进common.bundle.js。但此时moduleTest只是被childPageOne，和childPageTwo使用，出现两次，所以moduletTest是不会被打包进公共代码的。运行后的打包结果也确实如此。

实例3 打包第三方框架代码并和webpack代码放在一起
以jquery为例,test文件夹下启动git bash: npm install jquery --savepageOne.js引入jquery。

import Jquery from 'jquery'   //新增

第一种情况：不对jquery进行单独打包。也就是配置文件中删除plugins选项。
这是可以看到打包后的pageOne.bundle.js文件特别大，因为包含了jquery代码。

第二种情况，对jquery进行单独打包并和webpack生成的代码放在一起。修改webpack.config.js

var Webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js',
    vendor: ['jquery']   //vendor数组中写插件的名字。
  },

  output: {
    path: path.resolve(__dirname,'./dist'),
    filename:'[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },

  plugins: [
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',        //name值为vendor
      minChunks: Infinity   //Infinity
    })
  ]

}

按照以上配置我们来分析打包后的代码。

pageOne.bundle.js中jquery代码没有
vendor.bundle.js中生成了jquery代码和webpack自身代码（webpackJsonp）.
pageOne和pageTwo公共代码没有被打包。

实例4.
将框架插件代码和webpack自身代码打包成不同chunks.
在实际项目中，有webpack自身生成的代码，有引入第三方框架的代码，打包时，我们想把webpack代码和公共代码分别打包，那么该如何做呢？
只需要新建一个插件实例。
我们将实例三中的jquery和webpack的代码分别打包，修改webpack.config.js

var Webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js',
    vendor: ['jquery']
  },

  output: {
    path: path.resolve(__dirname,'./dist'),
    filename:'[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },

  plugins: [
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new Webpack.optimize.CommonsChunkPlugin({ //新建一个插件实例
      name: 'webpack',   //name区别于entry的键值名
      minChunks: Infinity
    })
  ]

}

这样打包后分析打包后的文件可以看到

webpack代码和jquery代码分别打包了。
pageOne pageTwo中公共代码还是没有打包

实例5 单独打包框架，webpack，和公共模块。
同样新建一个插件实例，并在chunks中限定打包范围

var Webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js',
    vendor: ['jquery']
  },

  output: {
    path: path.resolve(__dirname,'./dist'),
    filename:'[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },

  plugins: [
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2,  //出现两次及以上
      chunks:['pageOne', 'pageTwo']  //通过entry的name限定范围，以数组形式
    }),
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'webpack',
      minChunks: Infinity
    })
  ]

}

实例6 打包多个插件，同时打包入口文件的公共代码，和webpack自身代码

安装better-scroll（或者其他插件）：npm install better-scroll --save
pageTwo.js中引入better-scroll: import BScroll from 'better-scroll'

var Webpack = require('webpack')
var path = require('path')
module.exports = {
  entry: {
    pageOne: './src/pageOne.js',
    pageTwo: './src/pageTwo.js',
    vendor: ['jquery','better-scroll']  //数组中新增插件better-scroll
  },

  output: {
    path: path.resolve(__dirname,'./dist'),
    filename:'[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },

  plugins: [
    new Webpack.optimize.CommonsChunkPlugin({ //打包公共模块
      name: 'common',
      minChunks: 2,
      chunks:['pageOne', 'pageTwo']
    }),
    new Webpack.optimize.CommonsChunkPlugin({ //打包插件
      name: 'vendor',
      minChunks: Infinity
    }),
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'webpack',
      minChunks: Infinity
    })
  ]
}

打包后返现，better-scroll和jquery代码都被打包进vendor.bundle.js中。

本文介绍了webpack打包公共代码的几种情况，着重介绍了几个简单的例子，实际项目中配置可能更加复杂，但都是建立在基础之上。

入门webpack（五）打包公共代码

猜你喜欢