webpack处理样式

一般配置

首先安装模块，一般不需要都安装，看个人项目需要

yarn add style-loader css-loader less-loader sass-loader -D

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
    },
    mode: 'development',  // 模式 模式有两种  production development
    entry: './src/index.js', // 入口
    output: {
        filename: "bundle.[hash:8].js", // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是绝对路径
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true
        })
    ],
    module: {   // 模块
        // loader
        rules: [    // 规则 css-loader 允许@inport这种语法
            // loader的特点 希望单一
            // loader的用法，字符串只用一个loader， 多个loader需要[]
            // loader的顺序 默认是从右向左执行loader可以写成对象方式，可以传递参数

            // 可以处理less等  less less-loader  |  node-sass  sass-loader  |  stylus  stylus-loader
            // {test: /\.css$/, use: ['style-loader', 'css-loader]}
            {
                test: /\.(less|css)$/, use: [{
                    loader: "style-loader",
                    options: {
                        // insert: 'top',
                    }
                },  'css-loader', "less-loader"],
            }
        ]
    }
};

抽离css并压缩css文件

当使用优化压缩css时，需要再压缩js文件，而此时会存在问题，后续再做处理（可能是使用babel）

yarn add mini-css-extract-pligin
yarn add optimize-css-assets-webpack-plugin
yarn add uglifyjs-webpack-plugin -D

给css代码加上兼容性前缀

yarn add postcss-loader autoprefixer -D

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    optimization: {     // 优化项
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
            new OptimizeCss(),
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
    },
    mode: 'production',  // 模式 模式有两种  production development
    entry: './src/index.js', // 入口
    output: {
        filename: "bundle.[hash:8].js", // 打包后的文件名
        path: path.resolve(__dirname, 'dist'), // 路径必须是绝对路径
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css',
            // outputPath: ''
        })
    ],
    module: {   // 模块
        // loader
        rules: [    // 规则 css-loader 接续@inport这种语法
            // loader的特点 希望单一
            // loader的用法，字符串只用一个loader， 多个loader需要[]
            // loader的顺序 默认是从右向左执行loader可以写成对象方式，可以传递参数

            // 可以处理less等  less less-loader  |  node-sass  sass-loader  |  stylus  stylus-loader
            // {test: /\.css$/, use: ['style-loader', 'css-loader]}
            {
                test: /\.css$/, use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ],
            },
            {
                test: /\.less$/, use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    "less-loader",
                    // "postcss-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins: [require('autoprefixer')],
                            browser: ['last 200 versions']
                        }
                    }
                ],
            }
        ]
    }
};

使用autoprefixer会出现的问题

现在的方式，是在package.json文件中添加browsersList

报错信息：

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:

处理方式
package.json

{
    "browsersList": [
      "last 10 versions"
    ]
}