把工作中常用的webpack配置，包括loader、plugins、優化等記錄下來，方便學習和查閱。會一直更新本文。
初識webpack
- 在專案裡安裝 webpack、webpack-cli
- 在根目錄新建 webpack.config.js
- webpack4有兩種模式：development、production
entry
- 入口檔案，可以是物件，陣列，字串。
- 物件，key是可以做輸出名字。
output
- path，輸出目錄，絕對路徑。
- filename，輸出檔案的名字
const config = {
entry:{
index:'./index'
},
output:{
filename:'[name].[hash].js', //[name]是entry裡的key，可以加hash
path:__dirname
}
};
複製程式碼resolve:
- alias，設定別名。
//a.js
const help = requrie('../libs/help/a.js');
//b.js
const help = requrie('../../../libs/help/b.js');
//我們看到用到help裡某個檔案時，要找很多層目錄，可以在配置檔案裡寫入別名。
const config = {
resolve:{
alias:{
help:path.resolve(__dirname,"libs/help")
}
}
};
//a.js
const help = requrie('help/a.js');
//b.js
const help = requrie('help/b.js');
複製程式碼- extensions，省略副檔名，js引入時不需要寫副檔名
module
- noParse，如果確定一個模組沒有其他的依賴，可以配置這項。可以提高打包的速度
const config = {
module:{
noParse:[/jquery/],
rules:[
{
test:'匹配的檔案',
include:'在哪個目錄查詢',
exclude:'排除哪個目錄',
loader:'use:[{loader}]的簡寫',
use:[
//配置多個loader，從有往左依次執行
{
loader:"需要的loader",
options:{
//loader的相關配置
}
}
]
}
]
}
}
複製程式碼- rules，是一個規則陣列，每一項是一個物件，配置loader。
loader
- 在webpack裡，所有的檔案都是模組。loader的作用就是把檔案轉換成webpack可以識別的模組。
ES6、ES7、react
- babel-loader、babel-core
- babel-preset-stage-0 編譯ES7
- babel-preset-2015 編譯ES6
- babel-preset-react 編譯react
{
module:{
rules:[
{
test: /\.jsx?$/,
exclude:/node_modules/,
include:path.resolve(__dirname,'src'),
use:{
loader:'babel-loader',
options:{
presets:[
'es2015','react'
]
}
}
}
]
}
}
複製程式碼css、less、sass
- js裡引入css
- style-loader，把css放在style標籤裡插入html裡。
- css-loader，識別css，把css變成一個模組，可以根據options配置css模組化等。
- less-loader 該loader要和less一起使用。
npm install --save-dev less-loader less
複製程式碼- sass-loader 要和node-sass一起使用。
npm install sass-loader node-sass webpack --save-dev
複製程式碼const config = {
module:{
rules:[
{
test: /\.css$/,
use: [
'style-loader',
{
loader:'css-loader',
options:{
modules:true //css模組化
}
}
]
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', {
loader:'less-loader',
options:{
modifyVars:{
"color":"#ccc" //設定變數
}
}
}]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
}
複製程式碼圖片等其他資源
- js裡引入圖片等資源
- file-loader，在輸出目錄生成對應的圖片
{
module:{
rules:[
{
test: /\.(png|jpg|gif)$/,
use: ['file-loader']
}
]
}
}
複製程式碼- url-loader，很像file-loader，把符合大小把圖片生成base64，不符合的生成圖片
{
module:{
rules:[
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10*1024,
name: '[path][name].[ext]'
}
}
]
}
]
}
}
複製程式碼html
- html-loader 可以把html頁面中引入的圖片，輸出在相應的輸出目錄
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
}
複製程式碼plugins
- webpack提供了豐富的外掛介面。外掛可以讓webpack靈活可配置。
- plugins是一個陣列，裡面是每個外掛的例項。
清理檔案
- clean-webpack-plugin 清理檔案
const CleanWebpackPlugin = requrie('clean-webpack-plugin');
const config = {
plugins:[
new CleanWebpackPlugin(['輸出目錄'])
]
}
複製程式碼在html里加入資源
- html-webpack-plugin 設定html模版，讓入口js載入到相應的html裡，可以根據引數設定js的位置、順序、是否壓縮、載入哪些js、或者不載入哪些js等功能。
const HtmlWebpackPlugin = requrie('html-webpack-plugin');
const config = {
plugins:[
new HtmlWebpackPlugin({
template:'index.html', //設定模版
hash:true, //新增hash
filename:'hello.html', //輸出名字
})
]
}
複製程式碼提取css
- extract-text-webpack-plugin，把想要的css提取到相應的檔案裡
- 為了相容webpack4要安裝next版本
- 需要和loader一起使用
npm i extract-text-webpack-plugin@next -S
複製程式碼//注：此處的[name]生成後為入口檔案的key
const cssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const lessExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const scssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const config = {
module:{
rules:[
{
test: /\.css$/,
use: cssExtract.extract(['css-loader'])
},
{
test: /\.less$/,
use: lessExtract.extract({
use: ['css-loader', 'less-loader']
})
},
{
test: /\.scss$/,
use: scssExtract.extract({
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins:[
cssExtract,
lessExtract,
scssExtract
]
};
複製程式碼壓縮混淆程式碼
- (uglifyjs-webpack-plugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin]
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const config = {
module:{
plugins:[
new UglifyjsWebpackPlugin({
test: /\.js($|\?)/i
})
]
}
};
複製程式碼- 或者用webpack的生產模式
webpack --mode production
複製程式碼拷貝靜態檔案
- 有時專案中沒有引用的檔案，也需要打包到目標目錄裡
- copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
{
plugins:[
new CopyWebpackPlugin([
{
from:'./src/test',
to:'./'
}
])
]
}
複製程式碼監聽檔案變化
- webpack定時獲取檔案等更新時間，並跟上次儲存的時間作對比，不一樣就是做了修改。
- poll，每秒鐘詢問的次數
- aggregateTimeout，監聽變化，多少ms後再執行
const config = {
watch:true, //watch為true時，watchOptions才生效
watchOptions: {
ignored:/node_modules/, //忽略目錄
aggregateTimeout:300, //監聽變化 300ms後再執行
poll:1000 // 預設每秒詢問1000次
}
}
複製程式碼webpack-dev-server
- webpack-dev-server，本地伺服器，監聽檔案變化自動重新整理瀏覽器等功能。
- 文件裡是可以實現模組熱更替的，我沒有實現，有好的教程請告訴我，謝謝！
const webpack = require('webpack');
const config = {
devServer: {
hot: true, //寫了這項就不會自動重新整理，不寫就會自動重新整理，知道原因的請留言，謝謝！
open: true,
inline:true
},
plugins:[
new webpack.HotModuleReplacementPlugin() //不寫會報錯，不知道為什麼。。。
]
}
複製程式碼總結
記錄用到過的webpack loaders、plugins和其他相關配置。後續還會新增提取共程式碼等其他優化處理。