转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生产环境优化：oneOf 配置
- 放在oneOf代码块中的 loader 只会匹配一个,避免每一个文件在打包时每个loader都要过一遍。
- 注意：不能有两项配置处理同一种类型的文件
- 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
一、核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入压缩 css 的插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 设置 nodejs 环境变量,决定使用‘browserslist‘的哪个环境
// process.env.NODE_ENV = 'development';
// 复用 loader
const commonCssLoader = [
// use数组中loader执行顺序:从右到左,从下到上依次执行
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
// 'style-loader',
// 这个loader取代style-loader。作用:提取js中的css成单独文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
/*
css兼容性处理: postcss --> postcss-loader postcss-preset-env
postcss-preset-env的作用是帮postcss找到package.json中browserslist里面的配置,
通过配置加载指定的css兼容性样式，可以在 github上找到 browserslist 的更多配置。
以下举例应该在package.json 配置的内容。
========package.json 文件 begin=========
"browserslist":{
//开发环境-->设置node环境变量: process.env.NODE_ENV = development
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9-12"
],
//生产环境：默认是生产环境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
},
========package.json 文件 end=========
*/
//使用loader的默认配置
//'postcss-loader"
//修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/js/index.js',
// 输出
output: {
// 输出文件名
filename: 'js/built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
/*
语法检查: eslint-loader eslint
注意:只检查自己写的源代码,第三方的库是不用检查的
设置检查规则:
airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint
在package.json中eslintConfig中设置
"eslintConfig": {
"extends": "airbnb-base"
}
*/
{
test: /\.js$/,
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
exclude: /node_modules/,
loader: 'eslint-loader',
/*
1. pre 优先处理
2. normal 正常处理（默认）
3. inline 其次处理
4. post 最后处理
*/
enforce: 'pre',
options: {
// 这里的配置项参数将会被传递到 eslint 的 CLIEngine
// 自动修复eslint的错误
fix: true,
},
},//语法检查loader 配置 end
{
// 以下 loader 只会匹配一个
// 注意：不能有两项配置处理同一种类型的文件
// 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
oneOf: [
// 打包 css 文件的详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [...commonCssLoader],
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
...commonCssLoader,
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
},
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 @babel/preset-env
问题：只能转换基本语法，如promise不能转换
2．全部js兼容性处理 --> @babel/polvfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
loader: "babel-loader",
exclude: /node_modules/,
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
[
"@babel/preset-env",
{
// 按需加载
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
},
{
// 问题：默认处理不了 html 中的 img 图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
// 解析时会出问题: [object Module]
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]',
// 设置输出目录，将打包的图片资源放到imgs文件夹
outputPath: './imgs',
},
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader',
options:
{
// 默认情况下,生成使用ES块语法的Js模块
// 问题:生成的图片显示错误
// 解决: esModule改为false
esModule: false,
},
},
{
// 打包其他资源(除了html/js/css资源以外的资源)
// 排除css/is/html资源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
loader: 'file-loader',
options:
{
// 给资源进行重命名
// [hash:10]取资源的hash的前10位
// [ext]取文件原来扩展名
name: '[hash:10]. [ext]',
// 设置输出目录，将打包的其他资源放到media 文件夹
outputPath: './media',
},
},
]// oneOf [] end
}// oneOf end
],
},
// plugins的配置
plugins: [
// 详细的plugins配置
// html-webpack-plugin
// 功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
// 需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html',
//压缩 html 代码
minify: {
//移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
}),
new MiniCssExtractPlugin({
//对输出的css文件进行重命名，这里单独为生成的 css 创建一个 css 文件夹。
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
}),
// 压缩 css
new OptimizeCssAssetsWebpackPlugin(),
],
// 模式 development 开发环境，production 生产环境
// mode: 'development',
// 生产环境下会自动压缩js代码
mode: 'production',
// 开发服务器devServer:用来自动化(自动编译, 自动打开浏览器, 自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
// 启动devServer指令为: npx webpack-dev-server
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true,
},
};
核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
module.exports = {
……
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
//……这里放一个 js 处理 loader，例如放 eslint js 语法检查……
{
test: /\.js$/,
……
},//语法检查loader 配置 end
// ***********这里的配置**********
{
// oneOf: [ ] 代码块放在 {}中当做一个 loader,其他需要放进去的 loader 直接嵌套进去[]即可。
// 以下 loader 只会匹配一个
// 注意：不能有两项配置处理同一种类型的文件
// 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
// ***********这里的配置**********
oneOf: [
// 打包 css 文件的详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
……
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
……
},
{
test: /\.(?:js|mjs|cjs)$/,
……
},
{
// 问题：默认处理不了 html 中的 img 图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
……
},
{
test: /\.html$/,
……
},
{
// 打包其他资源(除了html/js/css资源以外的资源)
// 排除css/is/html资源
exclude: /\.(css|js|html|less|jpg|png|gif)$/,
……
},
]// oneOf [] end
}// oneOf {} end
],
},
// plugins的配置
plugins: [
// 详细的plugins配置
……
],
// 模式 development 开发环境，production 生产环境
// mode: 'development',
// 生产环境下会自动压缩js代码
mode: 'production',
};