从零开始的webpack生活-0x007：CommonsChunkPlugin基本用法

Sleepy 发布于2019-08-21 17:28 / 1614人阅读

摘要：概述上一章讲的是，和这一章依旧没有丝毫关系，这一章讲的是说实在的，这个插件略复杂，我还没完全搞懂，大概是还没到那么深我就已经选择其他解决方案了吧，所以这里只讲一些基本用法。直接打包几个包当然还有许多更加复杂的用法，还请看关于章节资源源代码

0x001 概述

上一章讲的是providerPlugin，和这一章依旧没有丝毫关系，这一章讲的是CommonsChunkPlugin,说实在的，这个插件略复杂，我还没完全搞懂，大概是还没到那么深我就已经选择其他解决方案了吧，所以这里只讲一些基本用法。

0x002 插件介绍

这个插件就是用来提取公共代码的，可以这么说，如果一个方法被两个入口文件调用，那么这个方法将被打包到这两个文件中，会形成代码冗余，这个插件可以将这个方法提取出来，放到第三个文件中，通过在引入入口文件之前引入第三个文件，就可以避免冗余的代码打包

0x003 栗子

为了更深刻理解，需要举个栗子

搭建环境

+ 0x007-common-chunk-plugin
  + src
  - webpack.config.js

安装依赖

$ npm init -y 
$ npm install --save-dev webpack

修改配置

var path       = require("path")
module.exports = {
    entry  : path.resolve(__dirname, "src/index.js"),
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].js"
    }
}

添加其他入口文件

entry  : {
    index1: path.resolve(__dirname, "src/index.js"),
    index2: path.resolve(__dirname, "src/index2.js")
},
// ./src/index.js
var timestamp = require("./utils")
timestamp()
// ./src/index2.js
var timestamp = require("./utils")
timestamp()

添加工具类./src/utils.js

export default function () {
    console.log(new Date().getTime())
}

打包并查看文件

// ./dist.index1.js
...
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
        /* harmony default export */ __webpack_exports__["default"] = (function () {
            console.log(new Date().getTime())
        });

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()
...

// ./dist/index2.js
...
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function () {
    console.log(new Date().getTime())
});

/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()
...

可以看到，同样的的utils分别被打包到了index1.js和index2.js，存在代码冗余。

0x003 配置commonChunkPlugin

修改配置文件

var path       = require("path")
var webpack    = require("webpack")
module.exports = {
    entry  : {
        index1: path.resolve(__dirname, "src/index.js"),
        index2: path.resolve(__dirname, "src/index2.js")
    },
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor"
        })
    ]
}

再次打包，可以发现，多了一个vendor.js，里面是utils.js的方法，查看index1.js和index2.js可以发现，原先重复的地方没了，因此我们就可以通过引入vendor.js、index1.js和vendor.js、index2.js来达到对公共代码的提取和分离。

// ./dist/vendor.js
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function () {
    console.log(new Date().getTime())
});

// ./dist/index1.js
webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()

/***/ })
],[1]);

// ./dist/index2.js
webpackJsonp([0],{

/***/ 2:
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()

/***/ })

},[2]);

0x004 直接打包几个包

new webpack.optimize.CommonsChunkPlugin({
            name     : ["jquery", "lodash"],
            minChunks: Infinity,
        })

当然还有许多更加复杂的用法，还请看[webpack关于commonChunkPlugin章节][2]

### 0x005 资源

- [源代码][3]

专线服务服务器托管从零开始的邮件服务器从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89559.html

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x015：ExtractTextWebpackPlugin分离样式

摘要：概述上一章讲的是，这一章讲的是依旧是没有任何关系。配合插件自动插入修改配置打包并查看它以的形式被插入头部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，请查阅关于章节资源源代码 0x001 概述上一章讲的是Dll，这一章讲的是ExtractTextWebpackPlugin,依旧是没有任何关系。 0x002 插件介绍这个插件用来将css导出到单独文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 评论0 收藏0
从零开始的webpack生活-0x008：DLL加速编译

摘要：概述上一章讲的是，和这一章依旧没有丝毫关系，这一章讲的是和。插件介绍这个插件啊，用来预打包一些第三方库，因为他们不经常修改，而每次我们引用他们之后都要将他们不断的打包一次又一次，不但浪费了调试编译的时间，还浪费了时间。 0x001 概述上一章讲的是CommonChunkPlugin，和这一章依旧没有丝毫关系，这一章讲的是DllPlugin和DllReferencePlugin。 0x...

ityouknow 2019-08-21 17:29 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 评论0 收藏0
从零开始的webpack生活-0x009：FilesLoader装载文件

摘要：修改配置文件匹配的文件名，这里匹配后缀为的，只要了该文件名结尾的文件，都将使用这个来处理命中后使用的加载器查看结果，和之前一致，推荐使用配置文件形式，可以保持引入文件格式的一致性。有利于维护和美观更多配置，可以查阅关于部分。 0x001 概述上一章讲的是DLL加速编译，这一章开始讲loader相关的部分，但是关于plugin的部分善未完结，因为即将要讲的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 评论0 收藏0