1.拆分配置和merge
webpack配置文件拆分為：
webpack.common.js 存放公共配置
webpack.dev.js 存放開發(fā)環(huán)境配置
webpack.prod.js 存放生產(chǎn)環(huán)境配置
開發(fā)環(huán)境 和 生產(chǎn)環(huán)境 分別引入 webpack.common.js：
安裝webpack-merge以用來引入webpack.common.js：
const webpackCommonConf = require('./webpack.common.js')
const { merge } = require('webpack-merge')
module.exports = merge(webpackCommonConf,{
...
})
在package.json里配置：
"scripts": {
"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
},
運行 npm run dev執(zhí)行開發(fā)環(huán)境的打包
運行 npm run build執(zhí)行生產(chǎn)環(huán)境的打包
2.啟動本地服務
在開發(fā)環(huán)境下配置[webpack.dev.js]:
需要安裝 webpack-dev-server
devServer: {
port: 8080, //端口
progress: true, // 顯示打包的進度條
contentBase: distPath, // 根目錄
open: true, // 自動打開瀏覽器
compress: true, // 啟動 gzip 壓縮
// 設置代理
proxy: {
// 將本地 /api/xxx 代理到 localhost:3000/api/xxx
'/api': 'http://localhost:3000',
// 將本地 /api2/xxx 代理到 localhost:3000/xxx
'/api2': {
target: 'http://localhost:3000',
pathRewrite: {
'/api2': ''
}
}
}
}
3.處理ES6
在公共環(huán)境下配置[webpack.common.js]:
module:{
rules:[
{
test: /\.js$/,
loader: ['babel-loader'],
include: srcPath,
exclude: /node_modules/
}
]
}
用babel-loader處理ES6
配置.babelrc
{
"presets": ["@babel/preset-env"],//preset-env常規(guī)插件打包配置
"plugins": []
}
4.處理樣式
在公共環(huán)境下配置[webpack.common.js]:
module:{
rules:[
{
test: /\.css$/,
// loader 的執(zhí)行順序是：從后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' ，注意順序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
}
postcss-loader 做瀏覽器兼容性
配置postcss.config.js
module.exports = {
plugins: [require('autoprefixer')] //默認加前綴忠烛，如-webkit
}
5.處理圖片
在開發(fā)環(huán)境下配置[webpack.dev.js]:
module:{
rules:[
// 直接引入圖片 url
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
}
在生產(chǎn)環(huán)境下配置[webpack.prod.js]:
module:{
rules:[
// 圖片 - 考慮 base64 編碼的情況
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的圖片用 base64 格式產(chǎn)出
// 否則榛斯，依然延用 file-loader 的形式肤晓，產(chǎn)出 url 格式
limit: 5 * 1024,
// 打包到 img 目錄下
outputPath: '/img1/',
// 設置圖片的 cdn 地址（也可以統(tǒng)一在外面的 output 中設置唯袄，那將作用于所有靜態(tài)資源）
// publicPath: 'http://cdn.abc.com'
}
}
},
]
}
6.出口文件配置hash
在生產(chǎn)環(huán)境下配置[webpack.prod.js]:
output: {
filename: 'bundle.[contentHash:8].js', // 打包代碼時飒赃，加上 hash 戳,內(nèi)容改變時冒嫡，hash值改變释液，避免訪問緩存
path: distPath,
}
7.模塊化
使用import 需要引入webpack使用
