資訊專欄INFORMATION COLUMN
摘要：概述上一章講的是，和這一章依舊沒有絲毫關(guān)系，這一章講的是說實在的，這個插件略復(fù)雜，我還沒完全搞懂，大概是還沒到那么深我就已經(jīng)選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個包當(dāng)然還有許多更加復(fù)雜的用法，還請看關(guān)于章節(jié)資源源代碼
0x001 概述
上一章講的是providerPlugin，和這一章依舊沒有絲毫關(guān)系，這一章講的是CommonsChunkPlugin,說實在的，這個插件略復(fù)雜，我還沒完全搞懂，大概是還沒到那么深我就已經(jīng)選擇其他解決方案了吧，所以這里只講一些基本用法。
0x002 插件介紹這個插件就是用來提取公共代碼的，可以這么說，如果一個方法被兩個入口文件調(diào)用，那么這個方法將被打包到這兩個文件中，會形成代碼冗余，這個插件可以將這個方法提取出來，放到第三個文件中，通過在引入入口文件之前引入第三個文件，就可以避免冗余的代碼打包
0x003 栗子為了更深刻理解，需要舉個栗子
搭建環(huán)境
+ 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"
})
]
}
再次打包，可以發(fā)現(xiàn)，多了一個vendor.js，里面是utils.js的方法，查看index1.js和index2.js可以發(fā)現(xiàn)，原先重復(fù)的地方?jīng)]了，因此我們就可以通過引入vendor.js、index1.js和vendor.js、index2.js來達(dá)到對公共代碼的提取和分離。
// ./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,
})
當(dāng)然還有許多更加復(fù)雜的用法，還請看[webpack關(guān)于commonChunkPlugin章節(jié)][2]
### 0x005 資源
- [源代碼][3]
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/89559.html
摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復(fù)之后會再次打包。 0x001 概述 其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...
摘要：概述上一章講的是，這一章講的是依舊是沒有任何關(guān)系。配合插件自動插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請查閱關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關(guān)系。 0x002 插件介紹 這個插件用來將css導(dǎo)出到單獨文件 0x003 栗子-不...
摘要：概述上一章講的是，和這一章依舊沒有絲毫關(guān)系，這一章講的是和。插件介紹這個插件啊，用來預(yù)打包一些第三方庫，因為他們不經(jīng)常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費了調(diào)試編譯的時間，還浪費了時間。 0x001 概述 上一章講的是CommonChunkPlugin，和這一章依舊沒有絲毫關(guān)系，這一章講的是DllPlugin和DllReferencePlugin。 0x...
0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ 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...
摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結(jié)尾的文件，都將使用這個來處理命中后使用的加載器查看結(jié)果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護(hù)和美觀更多配置，可以查閱關(guān)于部分。 0x001 概述 上一章講的是DLL加速編譯，這一章開始講loader相關(guān)的部分，但是關(guān)于plugin的部分善未完結(jié)，因為即將要講的ExtractTextWebp...
閱讀 4231·2023-04-26 01:48
閱讀 3350·2021-10-13 09:40
閱讀 1812·2021-09-26 09:55
閱讀 3720·2021-08-12 13:23
閱讀 1959·2021-07-25 21:37
閱讀 3508·2019-08-30 15:53
閱讀 1457·2019-08-29 14:16
閱讀 1454·2019-08-29 12:59
