webpack4配置詳解
摘要:
//方式一:單檔案寫法
entry: {
index: './src/pages/route.js',
//about: './src/pages/about.js',
//other:()=>{...}
}
//方式二:多檔案寫...
//方式一:單檔案寫法 entry: { index: './src/pages/route.js', //about: './src/pages/about.js', //other:()=>{...} } //方式二:多檔案寫法 entry: { /*index:[ 'webpack-hot-middleware/client', './src/root.js' ],*/ index: ['./src/root.js'], vendors : ['react','react-dom','redux','react-router','classnames'], }
二、output
-
path
: 輸出檔案的目錄, -
filename
:輸出的檔名,它一般跟你entry
配置相對應,如:js/[name].js
name
在這裡表示的是[index、vendors]
, -
chunkFilename
:塊,配置了它,非入口entry
的模組,會幫自動拆分檔案,也就是大家常說的按需載入,與路由中的require.ensure
相互應 -
publicPath
:檔案輸出的公共路徑, -
pathinfo
:即保留相互依賴的包中的註釋資訊,這個基本不用主動設定它,它預設 -development
模式時的預設值是true
,而在production
模式時的預設值是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 |
模組識別符號的 hash ,一般應用於 filename:'[name].[hash].js' |
chunkhash |
按需載入塊內容的 hash ,根據chunk自身的內容計算而來, 'js/[name].[chunkhash:8].js' |
contenthash |
這個沒有用過,看了下文件它是在提取 css 檔案時根據內容計算而來的 hash ,結合 ExtractTextWebpackPlugin 外掛使用 |
hash 長度 |
預設 20 ,可自定: [hash:8] 、 [chunkhash:16] |
四、mode
- 這個屬於
webpack4
才新增的,4之前大家一般用DefinePlugin
外掛設定 -
mode:development`
,production
,none
, -
development
: 開發模式,打包的程式碼不會被壓縮,開啟程式碼除錯, -
production
: 生產模式,則正好反之。
//方法一 webpack --mode development/production //方法二 …… mode:'development/production' ……
五、devtool
- 控制是否生成,以及如何生成
source map
檔案,開發環境下更有利於定位問題,預設false
- 當然它的開啟,也會影響編譯的速度,所以生產環境一定一定記得關閉
- 常用的值
-
cheap-eval-source-map
-
eval-source-map
-
cheap-module-eval-source-map
-
inline-cheap-module-source-map
等等, - 更詳細的可以去 ofollow,noindex">官方檢視
-
- 一般使用:
eval-source-map
較多,每個都有它不一樣的特性
六、optimization
-
optimization
是webpack4
新增的,主要是用來讓開發者根據需要自定義一些優化構建打包的策略配置 -
minimize:true/false
,告訴webpack
是否開啟程式碼最小化壓縮 -
minimizer
:自定js
優化配置,會覆蓋預設的配置,結合UglifyJsPlugin
外掛使用 -
removeEmptyChunks: bool
值,它檢測並刪除空的塊。將設定為false
將禁用此優化 -
nodeEnv
:它並不是node
裡的環境變數,設定後可以在程式碼裡使用process.env.NODE_ENV === 'development'
來判斷一些邏輯,生產環境UglifyJsPlugin
會自動刪除無用程式碼 -
splitChunks
:取代了CommonsChunkPlugin
,自動分包拆分、程式碼拆分,詳細預設預設配置,只會作用於非同步載入的程式碼塊 ——chunks:'async'
,它有三個值:all
,async
,initial
//環境變更也可以直接 在啟動中設定 //webpack --env.NODE_ENV=local --env.production --progress //splitChunks 預設配置 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
執行時程式碼,它可以設定為:boolean
、Object
- 該配置開啟時,會覆蓋 入口指定的名稱
optimization: { runtimeChunk:true,//方式一 runtimeChunk: { name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二 } }
七、resolve - 配置模組如何解析
-
extensions
:自動解析確定的擴充套件,省去你引入元件時寫字尾的麻煩, -
alias
:非常重要的一個配置,它可以配置一些短路徑, -
modules
:webpack
解析模組時應該搜尋的目錄,
其他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 - 編譯規則
-
rules
:也就是之前的loaders
, -
test
: 正則表示式,匹配編譯的檔案, -
exclude
:排除特定條件,如通常會寫node_modules
,即把某些目錄/
檔案過濾掉, -
include
:它正好與exclude
相反, -
use -loader
:必須要有它,它相當於是一個test
匹配到的檔案對應的解析器,babel-loader
、style-loader
、sass-loader
、url-loader
等等, -
use - options
:它與loader
配合使用,可以是一個字串或物件,它的配置可以直接簡寫在loader
內一起,它下面還有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/, use: [ { loader: 'file-loader?name=fonts/[name].[hash:8].[ext]', }, ], }, ], },
九、專案中常用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
十一、plugins/loader 區別
-
loader
的作用在於解析檔案,比如把ES6
轉換成es5
,甚至ES3
,畢竟還有萬惡的IE嘛;把Sass
、Less
解析成CSS
,給CSS
自動加上相容的字首;對圖片進行一個解析等等 -
plugins
對loader
乾的事情進行優化分類、提取精華(公共程式碼提取)、做壓縮處理(js/css/html
壓縮)、輸出指定的目錄等
十二、webpack-dev-server
-
contentBase
:告訴服務(dev server
)在哪裡查詢檔案,預設不指定會在是當期專案根目錄, -
historyApiFallback
:可以是boolean
、object
,預設響應的入口檔案,包括404
都會指向這裡,object
見下面示例 -
compress
:啟用gzip
壓縮, -
publicPath
:它其實就是output.publicPath
,當你改變了它,即會覆蓋了output
的配置, -
stats
: 可以自定控制要顯示的編譯細節資訊, -
proxy
:它其實就是http-proxy-middleware
,可以進行處理一些代理的請求
//方式一:不配置方式二的內容 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' }, /* 匹配路徑,進入不同的入口檔案,首席填坑官∙蘇南的專欄,公Z好: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刪除的點
module.loaders NoErrorsPlugin CommonsChunkPlugin DefinePlugin OccurenceOrderPlugin