Webpack——压缩css

大家好，欢迎来到IT知识分享网。

压缩css

一、下载插件

命令行执行：cnpm i optimize-css-assets-webpack-plugin -D

二、配置webpack.config.js

webpack.config.js

/ * 压缩css * 使用插件：optimize-css-assets-webpack-plugin * 1、下载插件：cnpm i optimize-css-assets-webpack-plugin -D * 2、引入该插件 * 3、在plugins中new该插件 */ 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 = { 
    // 模式 mode: 'development', entry: './src/js/index.js', output: { 
    filename: 'js/built.js', path: resolve(__dirname, 'build'), }, module: { 
    // loader配置 rules: [ // css的loader { 
    test: /\.css/, use: [ // 'style-loader', // 该loader的作用是创建一个style标签，将css插入标签中，因为我们要将css导入到文件中，所以不用这个loader MiniCssExtractPlugin.loader, // 使用该loader将js中的css导入到文件中，并引入html文件 'css-loader', { 
    loader: 'postcss-loader', options: { 
    postcssOptions: { 
    ident: 'postcss', plugins: [['postcss-preset-env', { 
   }]] } }, }, ], }, ], }, // 插件配置 plugins: [ new HtmlWebpackPlugin({ 
    template: './src/index.html', }), // 使用miniCssExtractPlugin插件将css提取为一个文件 new MiniCssExtractPlugin({ 
    // 对输出的文件重命名 filename: 'css/built.css', }), // 调用压缩css插件 new OptimizeCssAssetsWebpackPlugin(), ], devServer: { 
    static: resolve(__dirname, 'build'), port: 3000, compress: true, open: true, } }