webpack4配置詳解之慢嚼細(xì)咽
前言
經(jīng)常會有群友問起webpack、react、redux、甚至create-react-app配置等等方面的問題，有些是我也不懂的，慢慢從大家的相互交流中，也學(xué)到了不少。
? 今天就嘗試著一起來聊聊Webpack吧，旨在幫大家加深理解、新手更容易上路，都能從0到1搭建配置自定屬于自己的腳手架，或?qū)σ逊庋b好的腳手架有進(jìn)一步的鞏固，接下來蘇南會詳細(xì)講解webpack中的每一個配置字段的作用(部分為webpack4新增)。
近兩年，前端一直在以一個高速持續(xù)的過程發(fā)展，常常會有網(wǎng)友在調(diào)侃老了、學(xué)不動了，
雖是在調(diào)侃卻又間接闡述著無奈，迫于生活的壓力，不得不提速前行，
因?yàn)闆]有誰為你而停留，公司不會、社會不會、同伴不會……，停下可能將意味著淘汰 —— 理想很豐滿，現(xiàn)實(shí)很骨感，所以讓我們一起進(jìn)步，共同加薪，奮斗吧騷年，加油。。
～～吐槽過了，接著聊正事～～。
原諒我控制不住自己，想問下各位，昨天剛剛過去的雙十一你脫單了嗎？
然而并沒有 哈哈～
- 人生若只如初見，何事秋風(fēng)悲畫扇；
- 等閑變卻故人心，卻道故人心易變；
- 驪山語罷清宵半，夜雨霖鈴終不怨。
各位大佬早安，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官?蘇南，用心分享 做有溫度的攻城獅。
公眾號：honeyBadger8，群：912594095
entry
- 這個不用解釋了，看名字就是知道，它就是通往天堂/地獄的
入口，一切的苦難從這里開始，也從這里結(jié)束。 - 簡單介紹幾種寫法：
//方式一：單文件寫法
entry: {
index: './src/pages/route.js',
//about: './src/pages/about.js',
//other:()=>{...} //首席填坑官?蘇南的專欄,公眾號：`honeyBadger8`
}
//方式二：多文件寫法
entry: {
/*index:[ //首席填坑官?蘇南的專欄
'webpack-hot-middleware/client',
'./src/root.js'
],*/
index: ['./src/root.js'],
vendors : ['react','react-dom','redux','react-router','classnames'],
}
output - 輸出
- 它位于對象最頂級鍵(非常重要)，如果說
entry是一扇門，output就是審判官，決定著你是上天堂還是入地獄； - 指示 webpack 如何去輸出、以及在哪里輸出、輸出的格式等；
-
path: 輸出文件的目錄， -
filename:輸出的文件名，它一般跟你entry配置相對應(yīng)，如：js/[name].jsname在這里表示的是[index、vendors]， -
chunkFilename：塊，配置了它，非入口entry的模塊，會幫自動拆分文件，也就是大家常說的按需加載，與路由中的require.ensure相互應(yīng) -
publicPath：文件輸出的公共路徑， -
pathinfo：即保留相互依賴的包中的注釋信息，這個基本不用主動設(shè)置它，它默認(rèn)development模式時的默認(rèn)值是 true，而在production模式時的默認(rèn)值是 false， - 主要的就是這些，還有一些其他的
library、libraryTarget、auxiliaryComment等,感興趣的可自行了解，
output: {
path: path.resolve(__dirname, '../assets'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].[chunkhash:8].js',
publicPath: '/_static_/', //最終訪問的路徑就是：localhost:3000/_static_/js/*.js
//pathinfo:true,
}
hash
- 常用的有三種：
| 模板 | 描述 |
|---|---|
hash |
模塊標(biāo)識符的hash,一般應(yīng)用于filename：'[name].[hash].js' |
chunkhash |
按需分塊內(nèi)容的 hash，它是根據(jù)chunk自身的內(nèi)容計算而來 |
contenthash |
這個沒有用過，看了下文檔它是在提取css文件時根據(jù)內(nèi)容計算而來的 hash ，結(jié)合ExtractTextWebpackPlugin插件使用 |
| hash長度 | 默認(rèn)20，可自定:[hash:8]、[chunkhash:16] |
mode
- 這個屬于webpack4才新增的，4之前大家一般用
DefinePlugin插件設(shè)置 - mode：
development``，production，none， - development : 開發(fā)模式，打包的代碼不會被壓縮，開啟代碼調(diào)試，
- production : 生產(chǎn)模式，則正好反之。
//方法一
webpack --mode development/production
//方法二
……
mode:'development/production'
……
devtool
- 控制是否生成，以及如何生成 source map文件，開發(fā)環(huán)境下更有利于定位問題，默認(rèn) false,
- 當(dāng)然它的開啟，也會影響編譯的速度，所以生產(chǎn)環(huán)境一定一定記得關(guān)閉；
- 常用的值：
cheap-eval-source-map、eval-source-map、cheap-module-eval-source-map、inline-cheap-module-source-map等等，更詳細(xì)的可以去官方查看； - 本人一般使用：
eval-source-map較多，每個都有它不一樣的特性，有興趣的同學(xué)可以一一嘗試，
以上為自定配置中使用頻率較高的選項(xiàng)，公眾號：honeyBadger8
optimization
-
optimization是webpack4新增的，主要是用來讓開發(fā)者根據(jù)需要自定義一些優(yōu)化構(gòu)建打包的策略配置， -
minimize：true/false,告訴webpack是否開啟代碼最小化壓縮， -
minimizer：自定js優(yōu)化配置，會覆蓋默認(rèn)的配置，結(jié)合UglifyJsPlugin插件使用， -
removeEmptyChunks: bool 值，它檢測并刪除空的塊。將設(shè)置為false將禁用此優(yōu)化， -
removeEmptyChunks: bool 值，它檢測并刪除空的塊。將設(shè)置為false將禁用此優(yōu)化， -
nodeEnv：它并不是node里的環(huán)境變量，設(shè)置后可以在代碼里使用 process.env.NODE_ENV === 'development'來判斷一些邏輯，生產(chǎn)環(huán)境UglifyJsPlugin會自動刪除無用代碼， -
splitChunks：取代了CommonsChunkPlugin，自動分包拆分、代碼拆分，詳細(xì)默認(rèn)配置： - 默認(rèn)配置，只會作用于異步加載的代碼塊 —— chunks: 'async'，它有三個值：all,async,initial
//環(huán)境變更也可以直接 在啟動中設(shè)置
//webpack --env.NODE_ENV=local --env.production --progress
//splitChunks 默認(rèn)配置 ,首席填坑官?蘇南的專欄
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
-
runtimeChunk: 提取 webpack 運(yùn)行時代碼,它可以設(shè)置為：boolean、Object - 該配置開啟時，會覆蓋 入口指定的名稱?。?！
optimization: {
runtimeChunk:true,//方式一
runtimeChunk: {
name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二
}
}
以上為自定配置中使用頻率較高的選項(xiàng)，公眾號：honeyBadger8
resolve - 配置模塊如何解析
-
extensions：自動解析確定的擴(kuò)展,省去你引入組件時寫后綴的麻煩， -
alias：非常重要的一個配置，它可以配置一些短路徑， -
modules：webpack 解析模塊時應(yīng)該搜索的目錄， - 其他
plugins、unsafeCache、enforceExtension，基本沒有怎么用到，
//extensions 后綴可以省略，
import Toast from 'src/components/toast';
// alias ,短路徑
import Modal from '../../../components/modal'
//簡寫 ,首席填坑官?蘇南的專欄
import Modal from 'src/components/modal'
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
alias: {
src :path.resolve(__dirname, '../src'),
components :path.resolve(__dirname, '../src/components'),
utils :path.resolve(__dirname, '../src/utils'),
},
modules: ['node_modules'],
},
module.rules - 編譯規(guī)則，
-
rules：也就是之前的loaders， -
test： 正則表達(dá)式，匹配編譯的文件， -
exclude：排除特定條件，如通常會寫node_modules，即把某些目錄/文件過濾掉， -
include：它正好與exclude相反， - use -
loader：必須要有它，它相當(dāng)于是一個test匹配到的文件對應(yīng)的解析器，babel-loader、style-loader、sass-loader、url-loader等等， - use -
options：它與loader配合使用，可以是一個字符串或?qū)ο?，它的配置可以直接簡寫在loader內(nèi)一起，它下面還有presets、plugins等屬性； - 具體來看一下示例：
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['env',
{
targets: {
browsers: CSS_BROWSERS,
},
}],'react', 'es2015', 'stage-0'
],
plugins: [
'transform-runtime',
'add-module-exports',
],
},
},
],
},
{
test: /\.(scss|css)$/,
use: [
'style-loader',
{loader: 'css-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
{loader: 'postcss-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
{loader: 'sass-loader',options:{sourceMap: true}}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'url-loader?limit=12&name=images/[name].[hash:8].[ext]',
},
],
},
{
test: /\.(woff|woff2|ttf|eot|svg)$/,
exclude: /node_modules/,//首席填坑官?蘇南的專欄,公眾號：`honeyBadger8`
use: [
{
loader: 'file-loader?name=fonts/[name].[hash:8].[ext]',
},
],
},
],
},
項(xiàng)目中常用loader
- babel-loader、awesome-typescript-loader js*/ts編譯，
- css-loader、postcss-loader、sass-loader、less-loader、style-loader 等css樣式處理
- file-loader、url-loader、html-loader等圖片/svg/html等的處理，
plugins - 插件
- UglifyJsPlugin
- HotModuleReplacementPlugin
- NoEmitOnErrorsPlugin
- HtmlWebPackPlugin
- ExtractTextPlugin
- PreloadWebpackPlugin
- 等等，很多很多，插件的詳解會留在下一章節(jié)詳細(xì)介紹，歡迎持續(xù)關(guān)注。
plugins/loader 區(qū)別
- 新入門的一些同學(xué)可能會有些疑惑，不是有
loader了嗎？為什么還plugins呢，還要它做什么？ -
loader的作用在于解析文件，比如把ES6轉(zhuǎn)換成es5,甚至ES3,畢竟還有萬惡的IE嘛；把Sass、Less解析成CSS，給CSS自動加上兼容的前綴；對圖片進(jìn)行一個解析等等； -
plugins呢？它在干啥？它在吹水、喝茶、嗑瓜子聊天，當(dāng)然這是loader在沒有把項(xiàng)目做完之前，loader下班時間就是plugins苦難的開始，它要對loader干的事情進(jìn)行優(yōu)化分類、提取精華(公共代碼提取)、做壓縮處理(js/css/html壓縮)、輸出指定的目錄等……，反正也是很苦逼！
webpack-dev-server
- 這個有些老生常談了，新手上路一般都有用它，
- 公司因?yàn)楝F(xiàn)在是結(jié)合了
微服務(wù)，整套流程是結(jié)合：Dockerfile、nodejs、express等一起在線構(gòu)建編譯的，所以大部分項(xiàng)目都不會走webpack-dev-server； - 我們開發(fā)環(huán)境就是使用
express+webpack-dev-middleware+webpack-hot-middleware+ '...'; -
contentBase：告訴服務(wù)(dev server)在哪里查找文件，默認(rèn)不指定會在是當(dāng)期項(xiàng)目根目錄， -
historyApiFallback:可以是boolean、object，默認(rèn)響應(yīng)的入口文件，包括404都會指向這里，object見下面示例： -
compress：啟用 gzip 壓縮， -
publicPath：它其實(shí)就是 output.publicPath，當(dāng)你改變了它，即會覆蓋了output的配置， -
stats： 可以自定控制要顯示的編譯細(xì)節(jié)信息， -
proxy：它其實(shí)就是http-proxy-middleware，可以進(jìn)行處理一些代理的請求。
//方式一：不配置方式二的內(nèi)容
webpack-dev-server --config webpack/webpack.config.dev.js
//指定 端口： --port=8080
//開啟熱更新：--hot
//gzip： --compress
//方式二
devServer :
contentBase:'./assets',
host: '0.0.0.0',
port: 9089,
publicPath: '/assets/',
historyApiFallback: {
index: '/views/index.html'
},
/*
匹配路徑，進(jìn)入不同的入口文件，首席填坑官?蘇南的專欄,公眾號：`honeyBadger8`
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
*/
compress: true,
noInfo: true,
inline: true,
hot: true,
stats: {
colors: true,
chunks: false
},
proxy:{
'/mockApi': 'https://easy-mock.com/project/5a0aad39eace86040263d' ,//請求可直接寫成 /mockApi/api/login...
}
}
webpack4刪除的點(diǎn)：
- module.loaders
- NoErrorsPlugin
- CommonsChunkPlugin
- DefinePlugin
- OccurenceOrderPlugin
- 歡迎補(bǔ)充……，平時用到的大概就是這些
尾聲：
以上就是工作中react自定腳手架的配置總結(jié)，希望能對您有所幫助，webpack4的改動蠻大的，功能比之前強(qiáng)大了少，也簡便了開發(fā)者很多的麻煩，效率大大提高，但同時也意味著我們對于底層的東西，了解的更少了，下一節(jié)將為大家分享一些常用的插件/以及用法的分析，歡迎持續(xù)關(guān)注，記得點(diǎn)個贊哦，當(dāng)然您能動動手指關(guān)注下方公眾號就更棒了，謝謝支持！
用心分享 做有溫度的攻城獅!，公眾號：honeyBadger8
更多文章：
easy-mock 最好的備胎沒有之一
immutability因React官方出鏡之使用總結(jié)分享！
小程序項(xiàng)目之做完項(xiàng)目老板給我加了6k薪資～
小程序項(xiàng)目之填坑小記
面試踩過的坑，都在這里了～
你應(yīng)該做的前端性能優(yōu)化之總結(jié)大全！
如何給localStorage設(shè)置一個過期時間？
動畫一點(diǎn)點(diǎn) - 如何用CSS3畫出懂你的3D魔方？
動畫一點(diǎn)點(diǎn) - 手把手教你如何繪制一輛會跑車
SVG Sprites Icon的使用技巧
作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_43254766/article/details/83758660
交流：912594095、公眾號：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明原鏈接及出處。
