首先小小的吐槽一下webpack中文網(wǎng)的網(wǎng)站質(zhì)量凸主，大部分內(nèi)容還是介紹的不錯(cuò)的，但是有一些語(yǔ)法以及插件的使用方法還是老版本的容客，沒(méi)有更新，導(dǎo)致在跟著敲代碼的時(shí)候约郁，偶爾會(huì)卡姿跆簟（可能也是個(gè)好處吧？哈哈鬓梅。遇到問(wèn)題可以多思考找找原版的英文介紹或者其他博客的介紹）供置。下面總結(jié)一下webpack重要常用的概念，以及常用的loader以及插件绽快，作為一個(gè)記錄芥丧。
1.概念
基礎(chǔ)的四個(gè)部分組成，入口entry坊罢，輸出output续担，loader，plugins活孩。以及最實(shí)用的HMR（模塊熱替換）物遇。
2.loader
loader的是轉(zhuǎn)換源碼的一個(gè)工具，如將ES6轉(zhuǎn)成ES5憾儒，將小size圖片轉(zhuǎn)成DataURL等询兴。這可以使我們寫(xiě)代碼的時(shí)候做到高內(nèi)聚的效果，也可以使組件化的開(kāi)發(fā)更為快捷簡(jiǎn)單起趾。
常用loader：
css-loader诗舰，style-loader，url-loader（處理圖片）,babel-loader训裆。loader總覽
3.plugins
插件是用來(lái)優(yōu)化構(gòu)建后的文件的眶根。我們項(xiàng)目中去優(yōu)化也大部分是通過(guò)配置各種各樣的插件去實(shí)現(xiàn)的蜀铲。
常用的插件：
clean-webpack-plugin（用來(lái)清除構(gòu)建文件夾上一次構(gòu)建的文件），html-webpack-plugin（動(dòng)態(tài)生成入口html文件汛闸，動(dòng)態(tài)增加入口JS以及CSS蝙茶，也支持傳入項(xiàng)目配置好的入口html路徑），webpack-merge（在區(qū)分生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境是作為合并通用配置與個(gè)性配置方法）,extract-text-webpack-plugin（將css文件抽離成單獨(dú)的文件而不是引入在頁(yè)面的head中）诸老，SplitChunksPlugin（抽取公共代碼隆夯，減少總體包體積），definePlugin（定義全局的變量）别伏，webpack-dev-middleware與webpack-hot-middleware（實(shí)現(xiàn)HMR功能）蹄衷。
4.問(wèn)題總結(jié)以及注意事項(xiàng)
1.output中的publicPath是一個(gè)很靈活重要的配置屬性（配置CDN訪問(wèn)路徑，以及生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境的訪問(wèn)路徑）厘肮。
2.webpack-hot-middleware使用需要重新設(shè)置一遍入口選項(xiàng)愧口，考慮到多入口情況，常見(jiàn)簡(jiǎn)單實(shí)現(xiàn)方法如下：
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const entries = config.entry;
Object.keys(entries).forEach(entryKey => {
config.entry[entryKey] = ['webpack-hot-middleware/client?noInfo=true&reload=true',entries[entryKey]]
})
const compiler = webpack(config);
// console.log( compiler)
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});
3.webpack4.x以后移除了之前的commonsChunkPlugin插件类茂，引入了splitChunksPlugin耍属，其中最重要的cacheGroups要好好掌握。常見(jiàn)配置：（實(shí)現(xiàn)提取node-modules中的公用模塊）,貼個(gè)講的比較好的博客
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
minSize: 30000,
minChunks: 1,
chunks: 'initial',
priority: 1 // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí)巩检，數(shù)值越大越優(yōu)先處理
}
}
}
},
4.externals使用
利用externals配置體積大的插件依賴項(xiàng)厚骗，可以減少打包后的體積，可以減少資源加載的時(shí)間兢哭，通過(guò)配置cnd鏈接领舰，可以控制2~3個(gè)cdn域名下的資源，這樣可以并行加載迟螺。
