Webpack：CSS 文件的代码分割

MiniCssExtractPlugin

• 文档：https://webpack.js.org/plugins/mini-css-extract-plugin
• 可对css的引入文件进行代码分割
• 会把 css 打包成单独的一个文件
• 这个插件适合在production模式下做打包

css in js

webpack在做打包的时候会把css文件打包在js里

注意

注意tree shaking的代码分割

optimize-css-assets-webpack-plugin对css进行代码压缩

文档：https://github.com/NMFR/optimize-css-assets-webpack-plugin

配置文件代码

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, 
                loader: "babel-loader", 
            }, {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {