提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
webpack学习第二部分了,练习生产环境的webpack配置。
css
打包css文件成单独文件
webpack.config.js需添加如下部分配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
// 这个loader取代style-loader。作用:提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/built.css'
})
]
};
打包前
打包好的文件目录
可以发现a.css和b.css文件内容都在css目录下的built.css中
css兼容性处理
css兼容性处理:postcss --> postcss-loader
因为我们在开发项目中往往需要做兼容各种版本的浏览器,这个工作可以让webpack完成。当然需要一些配置,只不过是在项目的package.json中配置,部分配置如下:
"browserslist": {
// 开发环境 --> 设置node环境变量:process.env.NODE_ENV = development
"development": [
// 兼容最近的一个版本的浏览器
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
// 生产环境兼容性配置:默认是看生产环境
"production": [
// 兼容99.8%的浏览器
">0.2%",
//不要兼容已经废弃的浏览器如IE
"not dead",
//不要兼容op_mini浏览器
"not op_mini all"
]
}
postcss-preset-env的作用是帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式。
webpack.config.js 需添加如下配置
css压缩:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
// 使用loader的默认配置
// 'postcss-loader',
// 修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
]
};
打包前css文件内容
#box1 {
width: 100px;
height: 100px;
background-color: pink;
display: flex;
backface-visibility: hidden;
}
#box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
打包后
#box1 {
width: 100px;
height: 100px;
background-color: pink;
display: flex;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
可以看到打包后的css文件做了兼容性处理
压缩
webpack.config.js需添加如下部分配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
};
打包后
#box1{width:100px;height:100px;background-color:pink;display:flex;-webkit-backface-visibility:hidden;backface-visibility:hidden}#box2{width:200px;height:200px;background-color:#ff1493}
打包后的css文件中所有内容都在一行。
JavaScript
JavaScript语法检查
语法检查: eslint-loader eslint
webpack.config.js需添加如下部分配置
module: {
rules: [
{
test: /\.js$/,
// 注意:只检查自己写的源代码,第三方的库是不用检查的
// 设置检查规则:
//所以要排除node_modules文件
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
// 自动修复eslint的错误
fix: true
}
}
]
},
兼容性处理
js兼容性处理:babel-loader @babel/core
- 基本js兼容性处理 --> @babel/preset-env
问题:只能转换基本语法,如promise高级语法不能转换 - 全部js兼容性处理 --> @babel/polyfill
问题:我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大 - 需要做兼容性处理的就做:按需加载 --> core-js
webpack.config.js需要添加的配置
module: {
rules: [
{
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'
}
}
]
]
}
}
]
}
压缩
生产环境下会自动压缩代码。
HTML
压缩
webpack.config.js需要添加的配置,就是在使用html-webpack-plugin插件时多配置一点东西。
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]
总结
生产环境完整配置
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: [
// 处理css文件
{
test: /\.css$/,
use: [...commonCssLoader]
},
// 处理less文件
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
/*
当一个文件要被多个loader处理,那么一定要指定loader执行的先后顺序:
先执行eslint 在执行babel
*/
{
// 在package.json中eslintConfig --> airbnb
test: /\.js$/,
exclude: /node_modules/,
// 设置优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: true
}
},
// 处理js文件
{
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
}
},
//处理html文件
{
test: /\.html$/,
loader: 'html-loader'
},
//处理其他资源
{
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
plugins: [
// 兼容css
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin(),
// 压缩html
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
// 移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
})
],
mode: 'production'
};
目前前端已经不再是写个页面那么简单了,工程化越来越重要,所以我将持续更新这部分内容。