目录
1. 拆分配置和 merge
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
2. 启动本地服务 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 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. 处理样式
- 开发环境和生产环境都需要配置,所以写在 webpack.common.js 中
- less-loader:解析 less 语法,生成 css 文件
- postcss-loader:需配置 postcss.config.js(autoprefixer)补全浏览器前缀
- css-loader:加载 .css 文件
- style-loader:使用 <style> 将 css-loader 内部样式注入到 HTML 页面
// 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. 处理图片
- 生产环境(url-loader):小于5kb,直接以 base64 形式产出,减少一次 url 请求,减少 http 耗时,否则沿用 file-loader ,产出 url 地址
- 开发环境(file-loader):直接引入图片 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. 模块化
- import
- export