CommonsChunkPlugin

CommonsChunk 插件的做用就是提取代码中的公共代码,而后将公共模块打包到一个独立的文件中,以便在其它的入口和模块中使用,原理就是把多个入口共同的依赖都给定义成一个新入口javascript

多种打包状况:vue

单一入口,模块单一引用

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: 'build.js'
  },
  plugins: [
   
  ]
};

  jquery 模块被一块儿打包到 build.jsjava

 

单一入口,模块重复引用

 

相同的模块重复引用,webpack 只打包一份 webpack 打包的原理为,在入口文件中,对每一个 require 资源文件进行配置一个 id,也就是说,对于同一个资源,就算是 require 屡次,它的 id 也是同样的,因此不管在多少个文件中 require,它都只会打包一份 即内部的 __webpack_require__ 函数传入统一 id 时,不会导入新的模块,直接返回react

个人理解是,只有在多入口,模块重复引用时,使用 CommonsChunkPlugin 才能提取出重复打包的模块。固然,也能够在单入口时,提取出某些框架的代码,减小请求次数jquery

单一入口,提取框架模块

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    vendor: ["react", "react-dom", '其余模块'],//插件中 name,filename 以这个key为值
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name],而且插件中没有filename,
    },
  plugins: [
   new CommonsChunkPlugin({
       name: 'vendor'
      // filename:"vendor.js"//忽略则以name为输出文件的名字,不然以此为输出文件名字
   })
  ]
};

  打包出不变的框架模块,能够缓存在客户端,服务端更新后客户端只须要获取新的 main.jswebpack

多入口,模块重复引用,分文件输出

多入口就是分别执行的单入口,彼此之间互不影响,而该插件的原理就是把多个入口共同的依赖都给定义成一个新入口web

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: './main.js',
        main1: './main1.js',
        common1: ['jquery'],
        common2: ['vue']
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'//不使用[name],而且插件中没有filename,
        //这输出文件中只用chunk.js的内容,main.js的内容不知跑哪里去了
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["chunk","common1","common2"],//浏览器页面上使用的时候 common2 必须最早加载
            // filename:"chunk.js"//忽略则以name为输出文件的名字,
                //不然以此为输出文件名字
            minChunks: 2 //默认值
        })
    ]
};

  jquery 被打包到 common1.js ,vue 被打包到 common2.js,chunk.js 打包的是公共的业务模块(webpack用插件CommonsChunkPlugin进行打包的时候,将符合引用次数(minChunks)的模块打包到 name 参数的数组的第一个块里(chunk),而后数组后面的块依次打包(查找 entry 里的 key,没有找到相关的 key 就生成一个空的块),最后一个块包含 webpack 生成的在浏览器上使用各个块的加载代码,因此页面上使用的时候最后一个块必须最早加载)数组

相关文章
相关标签/搜索