Table of contents
1. Split configuration and merge
2. Start the local service webpack-dev-server
1. Split configuration and merge
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
2. Start the local service 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. Handle ES6 babel-loader
module.exports = {
entry: path.join(srcPath, 'index'),
module: {
rules: [
{
test: /\.js$/,
loader: ['babel-loader'],
include: srcPath,
exclude: /node_modules/
}
]
}
}
// 需配置 babelrc
{
"presets": ["@babel/preset-env"],
"plugins": []
}
4. Processing styles
- Both the development environment and the production environment need to be configured, so write in webpack.common.js
- less-loader: parse less syntax and generate css files
- postcss-loader: need to configure postcss.config.js (autoprefixer) to complete the browser prefix
- css-loader: load .css files
- style-loader: Use <style> to inject css-loader internal styles into HTML pages
// webpack.common.js
module: {
rules: [
{
test: /\.css$/,
// loader 的执行顺序是:从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' ,注意顺序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
},
// postcss.config.js
module.exports = {
plugins: [require('autoprefixer')] // 自动补全浏览器前缀
}
5. Processing pictures
- Production environment (url-loader): less than 5kb, directly output in base64 form, reducing one url request and reducing http time-consuming, otherwise use file-loader to output url address
- Development environment (file-loader): directly import image url
// webpack.dev.js
module: {
rules: [
// 直接引入图片 url
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
},
// webpack.prod.js
module: {
rules: [
// 图片 - 考虑 base64 编码的情况
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 5 * 1024,
// 打包到 img 目录下
outputPath: '/img1/',
// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
}
}
},
]
},
6. Modularity
- import
- export