Webpack4.x 升級
node 版本
C:\Users\XiGong>node -v
v10.2.0
package.json
"webpack": "^4.10.2",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.18.2",
"css-loader": "^0.28.7",
"mini-css-extract-plugin": "^0.4.1",
"url-loader": "^1.0.1",
"file-loader": "^1.1.11",
"copy-webpack-plugin": "^4.5.2",
設(shè)置mode
webacpack4分為production,development和none模式
為了區(qū)分三種模式
const ENV = process.env.NODE_ENV || 'development';
我們可以使用cross-env來跨平臺設(shè)置環(huán)境變量
cross-env NODE_ENV=production
target
告知 webpack 為目標(biāo)(target)指定一個環(huán)境。
可以為string | function(compiler)
默認(rèn)為web
context
基礎(chǔ)目錄例证，絕對路徑迷捧，用于從配置中解析入口起點(entry point)和 loader
const SOURCE_DIR = path.resolve(__dirname, 'src');
context: SOURCE_DIR
entry
如果傳入一個字符串或字符串?dāng)?shù)組胀葱，chunk 會被命名為 main。如果傳入一個對象庆锦，則每個鍵(key)會是 chunk 的名稱轧葛，該值描述了 chunk 的入口起點尿扯。
單頁
entry: {
client: './index.js',
}
多頁
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
output
output 位于對象最頂級鍵(key)，包括了一組選項衷笋，指示 webpack 如何去輸出辟宗、以及在哪里輸出你的「bundle、asset 和其他你所打包或使用 webpack 載入的任何內(nèi)容」泊脐。
output.filename
此選項決定了每個輸出 bundle 的名稱容客。這些 bundle 將寫入到 output.path 選項指定的目錄下约郁。
output.path
output 目錄對應(yīng)一個絕對路徑
const pkg = require('./package.json');
const OUTPUT_DIR = path.resolve(__dirname, 'build');
const CLIENT_DIR = path.join(OUTPUT_DIR, VERSION);
library和libraryTarget的使用
有時我們想開發(fā)一個庫如捅，如lodash镜遣，underscore這些工具庫，這些庫既可以用commonjs和amd方式使用也可以用script方式引入悲关。
這時候我們需要借助library和libraryTarget寓辱，我們只需要用ES6來編寫代碼，編譯成通用的UMD就交給webpack了秫筏。
output: {
path: CLIENT_DIR,
filename: 'assets/[name].[hash:8].js',
libraryTarget: 'umd',
}
optimization
在webpack 3 版本中我們使用CommonsChunkPlugin
CommonsChunkPlugin主要是用來提取第三方庫和公共模塊这敬，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導(dǎo)致加載時間過長阳掐。
但是在webpack4中我們使用optimization.splitChunks和optimization.runtimeChunk來代替
cacheGroups 自定義配置主要使用它來決定生成的文件
splitChunks.chunks
表明哪一塊需要被優(yōu)化. 如果是all的話就可以同時優(yōu)化異步和同步的冷蚂。
通過這一段解釋我們知道官方推薦設(shè)置為
chunks: 'all'
splitChunks name
split chunk的名字. 如果提供為true的話會自動生成一個name based on chunks and cache group key.如果是字符串或方法的話會允許你customize name。如果name與entry pont的匹配艺骂，entry point 就會被removed.
可以自定義也可以直接設(shè)為true
splitChunks.cacheGroups
Cache groups 可以繼承和覆蓋從 splitChunks.* 除了 test, priority 和 reuseExistingChunk 只能在 cache group level 配置. 如果要取消一些 default cache groups那就把它們設(shè)置為false.
就是說所有的屬性都可以寫在cacheGroups里面
splitChunks.cacheGroups.test
控制哪一個module會被選擇在這個cache group. 省略他選擇的所有modules.它可以匹配準(zhǔn)確的module path 和 chunk name彻亲。當(dāng)chunk name匹配上的時候所有的module都會被選擇吮廉。
module
module.rules
array
創(chuàng)建模塊時，匹配請求的規(guī)則數(shù)組宙址。這些規(guī)則能夠修改模塊的創(chuàng)建方式调卑。這些規(guī)則能夠?qū)δK(module)應(yīng)用 loader大咱，或者修改解析器(parser)注益。
Rule.use
應(yīng)用于模塊的 UseEntries 列表。每個入口(entry)指定使用一個 loader厦瓢。
傳遞字符串（如：use: [ "style-loader" ]）是 loader 屬性的簡寫方式（如：use: [ { loader: "style-loader "} ]）啤月。
{ test: Condition }：匹配特定條件谎仲。一般是提供一個正則表達(dá)式或正則表達(dá)式的數(shù)組，但這不是強(qiáng)制的夹姥。
{ include: Condition }：匹配特定條件辙诞。一般是提供一個字符串或者字符串?dāng)?shù)組，但這不是強(qiáng)制的倘要。
{ exclude: Condition }：排除特定條件封拧。一般是提供一個字符串或字符串?dāng)?shù)組夭问，但這不是強(qiáng)制的。
{ and: [Condition] }：必須匹配數(shù)組中的所有條件
{ or: [Condition] }：匹配數(shù)組中任何一個條件
{ not: [Condition] }：必須排除這個條件
使用 html-webpack-plugin
可以自動生成html模板
plugins: [
new HtmlWebpackPlugin({
title: 'React App',
filename: './index.html',
template: './index.ejs',
}),
],
使用mini-css-extract-plugin
webpack4得使用mini-css-extract-plugin這個插件來單獨打包css
為了打通基于 webpack 的整體項目編譯流程捧杉，我們也需要在 webpack 中合理地配置 CSS 的編譯方式秘血，使得 Sass（Less）、CSS 及 webpack 可以無縫銜接灰粮。
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/style.[hash:8].css',
chunkFilename: 'assets/css/[id].[hash:8].css',
})
]
使用CopyWebpackPlugin
在webpack中拷貝文件和文件夾
new CopyWebpackPlugin([
{ from: 'favicon.ico' },
]),
devtool
此選項控制是否生成粘舟，以及如何生成 source map
scripts配置
根據(jù)webpack.config.js文件打包
webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty
–progress 顯示打包進(jìn)度
–colors配置打包輸出顏色顯示
–hot熱加載佩研，代碼修改完后自動刷新
–inline 是刷新后的代碼自動注入到打包后的文件中(當(dāng)源文件改變時會自動刷新頁面)
-d 是debug模式霞揉，輸入一個source-map适秩，并且可以看到每一個打包的文件
-p 是對代碼進(jìn)行壓縮
Webpack-dev-server,一個輕量的node.js
express服務(wù)器打包并且在服務(wù)器上運(yùn)行，會生成在內(nèi)存當(dāng)中
webpack-dev-server
