上一篇【当下流行的打包工具Webpack从入门到熟练系统学习教程（二）Webpack怎么样打包处理资源】
这一节我们来讲webpack5环境下对css，js文件的压缩兼容性处理
本节目录
1.提取css为单独文件和压缩css文件
1.1 下载插件
npm i mini-css-extract-plugin -D //提取css为单独文件的
npm i optimize-css-assets-webpack-plugin -D // 压缩css文件
1.2 使用
html编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
css文件1
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
css文件2
.box2 {
width: 100px;
height: 100px;
background-color: #ff8500;
}
js文件引入css样式
import '../src/css/a.css'
import '../src/css/b.css'
webpack.config.js文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
resolve } = require('path');
// 引入提取css为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 引入压缩css文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
//创建标签，将样式放入
//'style-loader',
// 提取js中的css成单独文件 有了这个标签就不需要上面的将样式引入的‘style-loader’
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader',
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 使用提取css为单独文件的方法
new MiniCssExtractPlugin({
filename: 'css/built.css' //重命名文件
}),
// 使用压缩css文件方法的应用
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
}
2.css兼容性处理
2.1 下载插件
npm i postcss -D
npm i postcss-loader -D
npm i postcss-preset-env -D
2.2 使用
css文件
.box1 {
width: 200px;
height: 200px;
background-color: pink;
display: flex;
backface-visibility: hidden;
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
resolve } = require('path');
// css单独文件生产
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css兼容性处理
const PostcssPresetEnv = require('postcss-preset-env')
// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// css兼容处理 帮postcss找到package.json中的browsersList里面的配置，通过配置加载指定的css兼容样式
// 默认loader配置 'postcss-loader'
//修改loader的默认设置
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
PostcssPresetEnv() // 使用 css兼容性处理
]
}
}
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
}
webpack.json文件
"browSersList": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini alll"
]
}
适用最近一个版本和废除不需要不已经过时的版本
3. js兼容性处理
3.1 下载插件
npm i babel-loader @babel-core @babel/preset-env -D
3.2 使用
有时候浏览器不兼容js代码，比如IE-9、IE-10、IE-11等
这时候需要webpack5的插件来自动帮我们处理这些兼容问题
js代码
// import '@babel/polyfill'
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
new Promise(function(resolve) {
resolve(1)
}).then(function(res) {
console.log(res, 'promise')
})
webpack.config.js文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
resolve } = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build'),
},
mode: 'development',
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/,
options: {
presets: ['@babel/preset-env']
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
],
};
3.3 暴力解决兼容性
你会发现IE浏览器不兼容，因为上面的方法是针对一些兼容问题
你也可以使用下面的方法暴力解决，但是缺点是文件太大了
下载插件
npm i @babel/polyfill -D
js引入
import '@babel/polyfill'
const add = (x, y) => {
return x + y;
}
console.log(add(2, 3));
new Promise(function(resolve) {
resolve(1)
}).then(function(res) {
console.log(res, 'promise')
})
3.4 其他方法
下载插件
npm i core-js -D
引入使用到webpack.config.js里面
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
//core-js的版本
version: 3
},
//需要兼容的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
}]
},
4.压缩js处理
直接把webpack.config.js里面的mode属性换为开生产环境就行了，因为生产环境下会自动压缩js代码
mode: 'production',
5.压缩html
在webpack.config.js里面的HtmlWebpackPlugin对象下添加minify配置项
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
更多配置参数
> 配置参数
> collapseWhitespace: true, // 表示移出空格
> removeEmptyAttributes: true, //移除空属性
> collapseBooleanAttributes: true, // 移除checked类似的布尔值属性
> removeAttributeQuotes: true, // 移除属性上的双引号
> minifyCSS: true, // 压缩内嵌式的css代码（只能基本压缩，不能自动添加前缀）
> minifyJS: true, //压缩内嵌式的js代码（不能转码）
> removeStyleLinkTypeAttributes: true, //移除style和link标签上的type属性
> removeScriptTypeAttributes: true //移除script标签上的默认属性
如果webpack学的难的话推荐先查看gulp教程
更多精彩点击这里