webpack4.41.0配置三（插件minCssExtract/ DefinePlugin/Html）

（注：如无特殊说明这里的配置文件都指的是webpack.config.js）

minCssExtract

我们通常期望js和js文件一起，css和css文件一起。该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。

1.安装组件命令：npm install mini-css-extract-plugin

2. 在配置文件中引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3.在配置文件中创建plugins结点，并且对rules进行相应的变化

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    entry: './input.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'output.bundle.js'

    },

    plugins: [

        new MiniCssExtractPlugin({

            // Options similar to the same options in webpackOptions.output

            // all options are optional

            //name为entry入口文件名

            filename: '[name].css',

            chunkFilename: '[id].css',

            ignoreOrder: false, // Enable to remove warnings about conflicting order

        }),

    ],

    module: {

        rules: [

            {

                test: /\.(png|jpg|gif)$/i,

                use: [

                    {

                        loader: 'url-loader',

                        options: {

                            //小于限制的变成base64,大于的变成普通的物理文件

                            limit: 8192

                        }

                    }

                ]

            },

            {

                test: /\.m?js$/,

                //排除一些文件

                exclude: /(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env']

                    }

                }

            },

            {

                test: /\.scss$/,

                use: [

                    MiniCssExtractPlugin.loader,

                    'css-loader',

                    'sass-loader'

                ]

            }

        ]

    }

}

4.新建text.scss，在input.js入口文件中引入text.scss文件

4.进行webpack打包，会发现在dist文件夹下多了个main.css(实现了css和js文件的分离)

DefinePlugin

生产环境和开发环境中会有很多不一样的需求，比如在生产环境下要访问生产环境下的服务器地址，在开发环境下要访问开发环境下的服务器地址。但是我们不能用if else去判断，不方便维护。这时候这个插件的作用就出现了，我们的代码只写一套，但是我们把这个变量的定义放在DefinePlugin中，也就是webpack文件中去，我们使用的时候只使用这个变量就行了

1.在官网中https://webpack.docschina.org/plugins/找到需要使用的变量，将它添加到配置文件中的plugins中去