分离css

安装依赖模块

npm install --save-dev mini-css-extract-plugin

配置插件

plugins: [
    // 参数类似于webpackOptions.output
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename:'[id].css'
    }),
],

module:{
    rules:[
        {
            test: /\.css/,
            include: path.resolve(__dirname,'src'),
            exclude: /node_modules/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }
    ]
}

内联css

npm i html-inline-css-webpack-plugin -D

WARNING

• 注意此插件要放在HtmlWebpackPlugin的下面
• HtmlWebpackPlugin的inject设置为true

引入使用

const HtmlInlineCssWebpackPlugin= require('html-inline-css-webpack-plugin').default;

// 使用插件
plugins:[
  new HtmlWebpackPlugin({}),
  new HtmlInlineCssWebpackPlugin()
]

压缩JS和CSS

用terser-webpack-plugin替换掉uglifyjs-webpack-plugin解决uglifyjs不支持es6语法问题

// 安装
npm i uglifyjs-webpack-plugin terser-webpack-plugin optimize-css-assets-webpack-plugin -D

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [
           /*  new UglifyJsPlugin({
                cache: true,//启动缓存
                parallel: true,//启动并行压缩
                //如果为true的话，可以获得sourcemap
                sourceMap: true // set to true if you want JS source maps
            }), */
            new TerserPlugin({
                 parallel: true,
                 cache: true
            }),
            //压缩css资源的
            new OptimizeCSSAssetsPlugin({
                 assetNameRegExp:/\.css$/g,
                 //cssnano是PostCSS的CSS优化和分解插件。cssnano采用格式很好的CSS，并通过许多优化，以确保最终的生产环境尽可能小。
                 cssProcessor:require('cssnano')
            })
        ]
    },
}

处理CSS3前缀

TIP

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀

• Trident内核：主要代表为IE浏览器, 前缀为-ms
• Gecko内核：主要代表为Firefox, 前缀为-moz
• Presto内核：主要代表为Opera, 前缀为-o
• Webkit内核：产要代表为Chrome和Safari, 前缀为-webkit

npm i postcss-loader autoprefixer -D  // 安装

PostCSS 的主要功能只有两个

• 第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree，AST)
• 第二个就是调用插件来处理 AST 并得到结果

postcss-loader (opens new window)

与webpack.config.js同级

postcss.config.js

module.exports={
    plugins:[require('autoprefixer')]
}

webpack.config.js

// loader
{
   test:/\.css$/,
   use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader'],
   include:path.join(__dirname,'./src'),
   exclude:/node_modules/
}