文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。
mini-css-extract-plugin作用：该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin的前身，不过前者在 webpack4 算是废了。
安装依赖：
npm install --save mini-css-extract-plugin
然后引入，配置提出 css 样式，重命名 css 文件。
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')
module.exports = {
mode: "development",
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: 'Webpack App',
favicon: 'favicon.ico',
template: path.resolve(__dirname, './src/template.html'),
inject: true,
hash: true,
minify: {
removeComments: true, //去除HTML注释
collapseWhitespace: true, //去掉空格
minifyJS: true, // 压缩html里的js（使用uglify-js进行的压缩）
minifyCSS: true, // 压缩html里的css（使用clean-css进行的压缩）
}
}),
new MiniCssExtractPlugin({
filename:"index.css" //输出的css文件名，默认以入口文件名命名(例如main.css)
})
]
}
其中上面的 rules 还可以修改变成这样：
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
打包出来的 index.css将会插入 index.html 里面的 head 标签里面。
现在如果使用下面的样式：
div {
width: 100px;
height: 100px;
background-color: #345534;
transform: rotate(45deg);
}
其中transform: rotate(45deg); 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。
安装依赖：
npm install --save autoprefixer postcss-loader
配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']//版本兼容
})
]
}
打包之前的 css 样式为：
div {
width: 100px;
height: 100px;
background-color: #345534;
transform: rotate(45deg);
display: flex;
}
经过插件处理之后为：
div {
width: 100px;
height: 100px;
background-color: #345534;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
如果你不想新建一个 post.config.js 文件的话可以这样配置：
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: "postcss-loader",
options: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
})
]
}
}
]
},
处理的效果是完全和分开写一样的。
这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin。terser-webpack-plugin 是对打包的 JS 进行压缩的。
安装依赖：
npm install --save optimize-css-assets-webpack-plugin terser-webpack-plugin
注意：使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是生产模式（production）。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode:"production",
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
}
简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：
webpack4.X版本中，webpack -p命令，是可以默认压缩js文件的。所以使用 -p 还是使用 loader 看你的意思了。
网友评论