一、拆分配置和merge
将webpack配置文件拆分成三个。
webpack.common.js: 用于设置基本配置。
webpack.dev.js: 用于设置开发环境配置。
webpack.prod.js: 用于设置生产环境配置。
在dev和prod配置文件中引入基本配置
// ...
const webpackCommonConf = require('./webpack.common.js');
// ...
使用merge合并配置
module.exports = merge(webpackCommonConf, {
// prod 或者 dev 环境下的配置
// ...
},
二、启动本地服务
// ...
const webpackCommonConf = require('./webpack.common.js');
const { merge } = require('webpack-merge');
module.exports = merge(webpackCommonConf, {
// ...
devServer: {
port: 8080,
open: true, // 自动打开浏览器
client: {
progress: true, // 开启进度条
},
compress: true, // 启动 gzip 压缩
// 设置代理
proxy: {
// 将本地 /api/xxx 代理到 localhost:9000/api/xxx
'/api': 'http://localhost:9000',
// 将本地 /api2/xxx 代理到 localhost:9000/xxx
'/api2': {
target: 'http://localhost:9000',
pathRewrite: {
'/api2': ''
}
}
}
}
})
三、处理ES6
不同浏览器对于新的ES语法兼容性不同,需要将高版本的ES语法转换为不同浏览器都能兼容的版本。
在基本配置中配置babel-loader,需要先安装依赖,babel-loader会将es语法进行兼容性转化。
// ....
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
}
],
include: srcPath,
exclude: /node_modules/
},
// ...
]
},
// ....
}
四、处理样式
在基本配置文件中配置
// ....
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/, // 处理css结尾的文件
// loader 的执行顺序是:从后往前
use: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss需要配置postcss.config.js
},Ï
// ...
]
},
// ....
}
loader 的执行顺序是:从后往前, css-loader用于处理css文件,将css文件打包到js中,配合style-loader使用,将css文件打包并插入到页面中。
postcss-loader用于给不同浏览器的css样式加上相应的前缀,需要配置postcss.config.js
如果使用的less,在css_loader前需要使用less-loader插件对less文件进行处理。
// ....
module.exports = {
// ...
module: {
rules: [
{
Ïtest: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
// ...
]
},
// ....
}
五、处理图片
如果是在测试的环境中, 需要安装对应插件file-loader或者url-loader
// webpack.dev.js
const webpackCommonConf = require('./webpack.common.js');
module.exports = merge(webpackCommonConf, {
// ...
module: {
rules: [
// 直接引入图片 url
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader' // 也可以使用 file-loader, url-loader 更好
}
]
},
// ...
})
如果是在生产环境中,可以配置的更加更详细
// webpack.prod.js
const webpackCommonConf = require('./webpack.common.js')
module.exports = merge(webpackCommonConf, {
// ...
module: {
rules: [
// 图片 - 考虑 base64 编码的情况
{
test: /\.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader', // file-loader
options: {
// 小于 12kb 的图片用 base64 格式产出
// 否则,依然延用 file-loader 的形式,产出 url 格式
limit: 12 * 1024,
// 打包到 img 目录下
outputPath: '/img1/',
// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)
// publicPath: 'http://cdn.baidu.com'
}
}
},
]
},
// ...
})
六、模块化
// webpack.prod.js
const distPath = path.join(__dirname, '..', 'dist');
module.exports = merge(webpackCommonConf, {
// ...
output: {
filename: '[name].[contenthash:8].js', // 截取8会哈希
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到
},
// ...
})
当内容不发生变化时,文件的哈希值不会发生改变,再次需要改文件时直接从缓存读取,如果内容发生了改变, 文件的哈希值也会发生改变,需要重新加载。