webpack系列文章：
- 【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！
- 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
- 【Webpack 性能优化系列(7) - 懒加载和预加载】
- 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
- 【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！
- 【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存
- 【Webpack 性能优化系列(3) - oneOf】
- 【Webpack 性能优化系列(2) - source-map】
- 【Webpack 性能优化系列(1) - HMR 热模块替换】
- 【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？
- 【Webpack 简介及五个核心概念】
文章目录
生产环境
生产环境的特点是能让代码优化上线运行的环境。
我们要做哪些事情呢？
样式经过css-loader的处理被整合在js中，如果样式在js中的话，会让js体积非常大，下载就会慢；
同时因为是先加载js才能通过创建style标签插入到页面中，这里就会出现闪屏现象。
所以，我们就需要将css从js中提取出来；
当然还需要对代码进行压缩和兼容性处理，这里包括html、css和js。
提取 CSS 成单独文件
mini-css-extract-plugin这个插件会将 CSS 提取到单独的文件中
下载这个插件：
npm install --save-dev mini-css-extract-plugin
在配置文件webpack.config.js中引用：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
和开发环境中不同的一点，这里我们会用MiniCssExtractPlugin.loader这个loader取代style-loader。
MiniCssExtractPlugin.loader作用：提取js中的css成单独文件。
因为这个loade提取js中的css成单独文件，所以不需要style-loader再创建style标签，放入样式了。
具体的webpack.config.js配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style标签，将样式放入
// 'style-loader',
// 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin()
],
mode: 'development'
};
实例项目目录和文件内容：
使用当前配置打包运行一下，会发现打包后的build下面多了一个main.css文件
这个main.css会把我们之前的样式全都加载进来：
再看index.html，它会自动引入打包生产的资源
打开build下的index.html，样式正常
如果我们希望打包后的资源和之前的项目目录结构是一样的，可以在插件使用的地方配置filename属性，重命名即可。
配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style标签，将样式放入
// 'style-loader',
// 这个loader取代style-loader。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/built.css'
})
],
mode: 'development'
};
删掉前面打包的build文件，重新打包运行，可以看到build目录下面多了css目录，以及目录下面被我们重命名的built.css。
因为这样方式加载的样式是通过link标签引入，而不是style标签，所以不会产生闪屏现象；并且css文件和js文件分割开了，js文件体积也没那么大，解析速度也会更好一些。
CSS 兼容性处理
css兼容性处理需要用到postcss这个库，postcss在webpack中使用需要用到一个postcss-loader和一个插件postcss-preset-env
就是这个东东
下载postcss-loader和postcss-preset-env:
npm install --save-dev postcss-loader postcss-preset-env
有两种使用方式，第一种是使用postcss-loader的默认配置（就是直接把loader名以字符串的形式加到处理css loader的数组里）：
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// 使用loader的默认配置
'postcss-loader'
]
}
但是现在不能使用默认配置，我们需要修改loader的配置，那就得写成对象的形式，在options属性里修改loader的配置
第二种方式：
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// 使用loader的默认配置
// 'postcss-loader',
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',// 固定写法
plugins: () => [
// 使用我们前面下载的postcss插件
require('postcss-preset-env')()
]
}
}
]
}
前面的配置里我们在postcss-loader里配置了要使用的插件postcss-preset-env，这个插件的作用是帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。
所以我们现在还需要做一步，就是写这个browserslist
在package.json里加一个browserslist属性，值为对象，对象里面可以写两个参数，development(代表开发环境配置) 和 production(代表生产环境配置)
具体写法：
"browserslist": {
// 开发环境
"development": [
"last 1 chrome version",//兼容最近的chrome浏览器版本
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境
"production": [
">0.2%",// 大于99.8%的浏览器，基本上全部的浏览器
"not dead",// 不要已经死的浏览器，比如ie10
"not op_mini all"// 不要op_mini所有的，因为op_mini早都死完了，所以不要它，而且在国内基本没有人使用这种东西，所以全都不要
]
},
开发环境不需要做太多，兼容一些主要浏览器的调试版本就足够了；但是生产环境就要多写一点，具体看上面生产环境配置
更多的配置大家可以去github搜关键字browserslist，上面有一个仓库，里面详细介绍了我们可以在browserslist写哪些参数，以及参数详细的配置。
现在验证一下前面的配置靠不靠谱，改动一下样式，添加一些有兼容性问题的样式
display: flex;
backface-visibility: hidden;
postcss-preset-env这个插件默认情况下就是找生产环境配置，也就是说默认使用browserslist里的production配置，跟webpack.config.jswebpack配置里的模式 mode: 'development'是没有关系的。
我们做实例演示，想要变成开发环境，需要设置node环境变量：
// 设置nodejs环境变量
process.env.NODE_ENV = 'development';
css兼容性处理最终配置：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 设置nodejs环境变量
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
/*
css兼容性处理：postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
"browserslist": {
// 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境：默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
// 使用loader的默认配置
// 'postcss-loader',
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
};
上面的配置修改了环境变量，postcss-preset-env插件会以开发环境的配置做兼容性处理，开发环境只做了主要浏览器最近的版本，我们打包运行实例验证一下，打开build里面的样式代码
我们发现，它对backface-visibility做了兼容性处理，flex没有做处理
接着我们测试生产环境的兼容性配置，注释掉修改环境变量，没有设置环境变量，默认就是找生产环境：
// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';
重新打包运行
这时候我们发现，生产环境还多了一个dlisplay:-webkit-box;，这个就是做了一个兼容性处理
通过postcss的处理，我们在写样式的时候就不用太过操心兼容性问题，可以把它都交给工具，让工具自动去完成，这样就大大解放了开发人员的一些复杂的操作，只需要考虑最简单的东西，通过工具帮我们自动做兼容性处理。
压缩 CSS
压缩css需要用到optimize-css-assets-webpack-plugin这个插件
下载插件：
npm install --save-dev optimize-css-assets-webpack-plugin
这个插件的使用非常简单，引入后直接在plugins中new调用即可
引入插件：
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
在plugins中new调用：
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
这个插件只要调用就可以压缩css，内部的默认配置已经足够将css进行压缩了，所以我们不需要再修改它的配置。
具体配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
};
打包运行，找到build下的css
我们发现css整体已经被压缩成一行了
压缩后的文件体积为204kb
这里为了对比，我们注释掉插件的调用，关闭css压缩
// 压缩css
// new OptimizeCssAssetsWebpackPlugin()
打包运行查看一下结果
没有压缩构建出的css代码：
没有压缩构建出的css代码体积：
没有压缩的的css体积大小为273kb，前面压缩后的是204kb，这个压缩的还是比较少的，因为样式不多，总共才14行代码，所以压缩的效果不是特别明显，实际开发中的样式会非常多，那时css压缩后的体积就会非常小，效果很明显。css文件越小，请求速度就会越快，加载速度就会越快，用户看到的效果也会更快一些，用户体验就会更好。所以我们在上线之前一定要给代码压缩
JS 语法检查 eslint
语法检查最常用的工具就是eslint，在webpack中对应的要使用eslint-loader，这个loader依赖eslint这个库，也需要下载
语法检查js文件：
test: /\.js$/,
注意：只检查自己写的源代码，第三方的库是不用检查的，排除node_modules：
exclude: /node_modules/,
/*
语法检查： eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {}
}
设置检查规则，在package.json中eslintConfig中设置
语法检查规则推荐使用airbnb规则，为什么呢？
我们打开github，在探索中找到JavaScript这个主题，下面就是js最受欢迎的仓库了
这里可以看到排名第二的是vuejs
第三个是facebook的react
第四个是bootstrap
第五个是一本书：你不知道的js
第六个就是我们推荐的airbnb这个风格指南
airbnb这个风格指南详细的介绍了我们应该怎么写js代码，不应该怎么写js代码，是一个很优秀的库。
我们现在要把这个库应用在eslint上，搜索npm，搜eslint，可以看到一个插件： eslint-config-airbnb，这个就是让airbnb风格指南在eslint中生效
airbnb有 eslint-config-airbnb和 eslint-config-airbnb-base两个插件，其中 eslint-config-airbnb会包含react的风格建议，我们现在不写react代码，所以不用这个插件，用eslint-config-airbnb-base
eslint-config-airbnb-base插件又有两个版本，eslint-config-airbnb-base（支持ECMAScript 6+）和eslint-config-airbnb-base/legacy（仅支持ES5及以下），看到legacy（遗产，传统）这个词了吧，我们当然要使用支持ECMAScript 6+的eslint-config-airbnb-base版本啦，从下面的图片能看到我们还需要下载eslint和eslint-plugin-import这两个库
下载需要的库和插件：
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
在package.json里的eslintConfig中设置检查规则：
找到package.json，在里面加一个字段叫eslintConfig，值为一个对象，通过extends来继承airbnb-base就OK了。
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
如果要指定配置文件中的环境，请使用env键，并通过设置每个环境来指定要启用的环境true。例如，以下启用浏览器和Node.js环境：
{
"env": {
"browser": true,
"node": true
}
}
或者在一个package.json文件中
{
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
配置eslint语法检查后，运行项目会发现后很多代码不规范的，我们一个个去修复会很麻烦，所以我们在配置的时候可以再加一个选项：fix: true，自动修复eslint的错误，不用我们手动去改
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
如果我们在代码里使用console，eslint也会发出警告：不建议使用console
但是我们是为了调试，这里就可以忽略这个规则，有一个选项叫// eslint-disable-next-line，就是下一行eslint所有规则都失效（下一行不进行eslint检查）
写法就是在需要忽略的代码上面写一行// eslint-disable-next-line，跟注释的写法一样
这样重新打包运行就不会再有警告了。
最终配置：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
语法检查： eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
设置检查规则：
package.json中eslintConfig中设置~
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
package.json
"eslintConfig": {
"extends": "airbnb-base",
"env": {
"browser": true
}
},
JS 兼容性处理bable、core-js
先做个测试，写一些es6的语法
const add = (x, y) => {
return x + y;
};
console.log(add(2, 5));
使用webpack的内置配置看一下效果
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
打包运行后，看built.js
可以发现webpack的内置配置是没有做兼容性处理的，正常我们打开chrome浏览器是没有问题的，输出结果是正常的
但是要注意，一旦我们打开ie浏览器就会报语法错误，因为它根本不认识这些语法
所以我们就必然需要做兼容性处理
做兼容性处理需要用到bable，在webpack中对应使用bable-loader，使用时我们需要做具体的配置，有一个参数叫presets预设：指示babel做怎么样的兼容性处理，默认情况下我们会传入'@babel/preset-env'，这样相当于做一个预设环境的兼容性处理，一个非常基本的兼容性处理
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: ['@babel/preset-env']
}
}
下载需要的插件：
npm install --save-dev babel-loader @babel/core @babel/preset-env
以上面的兼容性配置打包运行，打开built.js
我们发现此时的es6语法已经做了兼容性处理
刷新查看ie浏览器效果
结果打印出来了，正常显示。此时我们已经有了基本的兼容性处理。
为什么说只是有了基本的兼容性处理呢？是因为在开发过程中的兼容性问题不止上面这些，比如说我们写一个Promise，上面的配置能够处理吗？
以前面的配置打包运行，查看built.js
看到这个Promise还是原封不动的promise，只有有箭头函数做了兼容性处理（基础的兼容性配置做的处理）
刷新查看ie浏览器效果
ie浏览器报错：promise未定义
总结这种方法：
基本的js兼容性处理 --> @babel/preset-env，存在的问题：只能转换基本语法，如promise高级语法不能转换。
所以我们就要解决这个兼容性问题
第二种解决方法：做全部js兼容性处理 --> @babel/polyfill
下载@babel/polyfill这个库
npm i @babel/polyfill -D
这个不是bable插件，下载之后只需引入即可
比如直接在js代码里用import引入
import '@babel/polyfill';
引入后我们再来构建一次
刷新ie浏览器，查看效果，可以发现ie浏览器正常运行打印了
下面我们看这第二种做全部兼容性处理的方法有什么问题：
之前构建的代码体积为4kb
现在我们通过import '@babel/polyfill'，引入这个库后打包的代码体积为441kb
查看built.js可以发现，里面包含了各式各样的兼容性处理，总结一下就是，@babel/polyfill这个库会把js全部的兼容性处理纳进来，不管你做什么兼容性，它一次性全部搞定
相当于我饿了，只需要吃一顿饭，它却把一年内的粮食都运进来
@babel/polyfill是怎么做的呢？其实它就是把那些浏览器不识别的方法，全部定义好，直接挂载在对应的顶层对象上，这样不管它识不识别你都可以直接用了。所以这种是一种相对比较暴力的解决方式。
总结第二种方法：
全部js兼容性处理 --> @babel/polyfill ，存在的问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
第三种解决方法：需要做兼容性处理的就做：按需加载 --> core-js
下载core-js:
npm i core-js -D
配置core-js
如上图，我们稍微改动一下presets参数的写法，给'@babel/preset-env'的数组外再套个数组 (改成双层数组)，在下面写相应的配置：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
上面就是我们第三种方案的配置，要注意，使用第三种方案就不能再使用第二种方案，所以要把前面引入的import '@babel/polyfill';注释掉：
// import '@babel/polyfill';
再次打包运行，我们发现代码的体积更小了，只有104kb
总结一下
js兼容性处理：babel-loader @babel/core
- 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换 - 全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ - 需要做兼容性处理的就做：按需加载 --> core-js
js兼容性处理的最终配置（按需加载core-js）：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*
js兼容性处理：babel-loader @babel/core
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如promise高级语法不能转换
2. 全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设：指示babel做怎么样的兼容性处理
presets: [
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs: {
version: 3
},
// 指定兼容性做到哪个版本浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
压缩 JS
js压缩非常简单，只需要把mode改为production，即生产环境下webpack会自动压缩代码。
生产环境下webpack会加载一些不一样的配置，加载了很多插件，其中UglifyJsPlugin这个插件就会去压缩js代码，所以我们就不需要自己去写插件了，webpack内部已经实现好了
我们用一个最基础的webpack配置，修改mode改为production，测试一下效果
mode: 'production'
};
实例项目的js代码：
const add = (x, y) => {
return x + y;
};
console.log(add(2, 5));
const promise = new Promise(resolve => {
setTimeout(() => {
console.log('定时器执行完了~');
resolve();
}, 1000);
});
console.log(promise);
打包运行后的built.js代码：
可以看到代码已经压缩成一行了，js压缩搞定
压缩 HTML
前面我们给css和js都做了兼容性处理，html要不要做兼容性处理呢？答案是不需要，html是没办法做兼容性处理的，它的标签认识就是认识，不认识就是不认识，所以html是不需要做兼容性处理的。我们只需要对html代码进行压缩。
通过HtmlWebpackPlugin对html代码进行压缩，HtmlWebpackPlugin插件配置中有一个选项叫minify，使用这个选项做html压缩。
配置如下：
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode: 'production'
};
生产环境配置总结——一个完整的开发环境配置
1.代码复用
前面css文件做的配置，对于less文件我们也需要做：
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
},
'less-loader'
]
},
可以发现对less文件使用的后三个loader，css文件也使用了，所以这里我们就可以复用一下
提取公用的loader：
// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
用扩展运算符展开：
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
这样就不用去写太多重复代码，代码更加精简一些。
2.指定loader执行的先后顺序
正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序。
对于js文件loader执行的先后顺序：先执行eslint 在执行babel
通过对loader设置enforce属性指定该loader优先执行：
// 优先执行
enforce: 'pre',
/*
正常来讲，一个文件只能被一个loader处理。
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint 在执行babel
*/
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
3.一个完整的生产环境配置
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');
// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
// 复用loader
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在package.json中定义browserslist
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
正常来讲，一个文件只能被一个loader处理。
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
先执行eslint 在执行babel
*/
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {version: 3},
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
mode: 'production'
};
参考
- https://www.bilibili.com/video/BV1e7411j7T5?p=15&spm_id_from=pageDriver
1053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
