生产环境基本配置
之前学习了各种文件的处理,接下来就需要汇总到一起,生成一个我们想要的生产环境的基本配置
const {
resolve
} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 设置node.js环境变量:决定使用browserlist的哪个环境
process.env.NODE_ENV = 'development'
// 复用loader
const commonCssLoader = [
// 提取成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
// 对样式进行兼容性处理
// use数组中loader执行顺序:从右到左,从下到上依次执行,所以样式兼容性处理放在coo-loader后面
{
// 还需要在package.json中对browserlist进行设置,且如果需要使用开发环境配置,则要设置node.js环境变量,不然browserlist将默认使用production下的配置
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
]
module.exports = {
entry: './src/js/index.js',
output: {
// 文件名
filename: 'js/bulit.js',
// 输出的文件目录
path: resolve(__dirname, 'build')
},
module: {
rules: [
// 处理css样式文件
{
test: /\.css$/,
use: [...commonCssLoader]
},
// 处理less文件
{
test: /\.less$/,
use: [
...commonCssLoader,
// 将less文件编译成css文件
// 需要下载less-loader和less
'less-loader'
]
},
/**
* 正常来说,一个文件只能被一个loader处理。
* 当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序
* 先执行eslint 再执行 babel
* 1. 因为eslint是执行语法检查的,如果语法出现错误,执行babel也没有意义
* 2. babel会将ES6语法转换为ES5语法,一旦经过babel转换之后再进行eslint检查就会报语法错误
*/
// 处理js文件
{
// 在package.json文件中eslintConfig配置使用airbnb规则
test: /\.js$/,
exclude: /node_modules/, // 排除检测node_modules的内容
// 优先执行该loader,确保两个loader不会产生冲突
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 自动修复检查到的问题
fix: true
}
},
// 对js做兼容性处理
// 对js做兼容性处理
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设
presets: [
[
'@babel/preset-env',
{
// 实现按需加载
useBuiltIns: 'usage',
// 指定core-js版本,可以到package.json查看
corejs: {
version: 3
},
// 指定兼容哪些版本的浏览器
targets: {
chrome: '60',
firefox: '50',
ie: '9'
}
}
]
]
}
},
// 处理图片文件
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理(8~12kb)
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 给图片重命名
// [hash: 10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]',
// 输出路径
outputPath: 'imgs',
/**
* 问题:因为url-loader默认使用ES6模块化解析,而html-loader引入图片是commonjs
* 解析时会出问题:[object Module]
* 解决:关闭url-loader的ES6模块化,使用commonjs解析
*/
esModule: false,
}
},
{
test: /\.html$/,
// 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader'
},
// 处理其它文件
{
// 排除以下几种文件
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 对输出的文件进行重命名
filename: 'css/built.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin(),
// 处理html文件
new HtmlWebpackPlugin({
// 以指定html文件为模板创建新的html文件
template: './src/index.html',
// 压缩html文件
minify: {
// 压缩空格
collapseWhitespace: true,
// 去除注释
removeComments: true
}
})
],
// 生产环境下js会自动压缩
mode: 'production'
}