webpack提取css成单独文件和css兼容处理

一、提取css成单独文件

1、下载mini-css-extract-plugin

npm i mini-css-exreact-plugin

2、配置插件

这里要注意因为要分离css所有style-loader不适用需要使用MiniCssExtractPlugin.loader进行解析

// webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
        rules:[
            ...
            {
                test: /\.css$/,
                use: [
                    //'style-loader',// 创建style标签到head上但是要分离css时候不适用，
                    MiniCssExtractPlugin.loader,// 使用插件特有的loader提取js中css成为单独的文件
                    'css-loader' // 将css文件解析到打包后的js中
                ]
            }
        ]
    }
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css重名名
            template: './src/built.css'
        })
    ]
}

二、css兼容处理

1、下载postcss 、 postcss-loader、 postcss-preset-env

npm i postcss postcss-loader postcss-preset-env -D

2、配置文件

// webpack.config.js
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
        rules:[
            ...
            {
                test: /\.css$/,
                use: [
                    //'style-loader',// 创建style标签到head上但是要分离css时候不适用，
                    MiniCssExtractPlugin.loader,// 使用插件特有的loader提取js中css成为单独的文件
                    'css-loader' // 将css文件解析到打包后的js中
                    /*
                    	兼容性处理 postcss postcss-loader postcss-preset-env
                    	帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

                        "browserslist": {
                          // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
                          "development": [
                            "last 1 chrome version",
                            "last 1 firefox version",
                            "last 1 safari version"
                          ],
                          // 生产环境：默认是看生产环境
                          "production": [
                            ">0.2%",
                            "not dead",
                            "not op_mini all"
                          ]
                        }
                    */
                    // 使用loader的默认配置
                    // 'postcss-loader',
                    // 修改loader的配置
                    {
                    	loader: 'postcss-loader',
                    	options: {
                    		ident: 'postcss',
                    		plugins: () => {
                				require('postcss-preset-env')()
            				}
                    	}
                    }
                ]
            }
        ]
    }
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css重名名
            template: './src/built.css'
        })
    ]
}

3、修改pakage.json配置

{
    ...
    "browserslist": {
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }
}