webpack3中的插件extract-text-webpack-plugin已废弃

前面的话

在webpack3中的extract-text-webpack-plugin用来提取css代码到一个单独的文件中，但在webpack4中将这个插件换为mini-css-extract-plugin。

使用方法

• 在配置文件中引用mini-css-extract-plugin插件
• 在plugins选项中实例化此插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module: {
        rules: [
            {
                // 用正则表达式去匹配要用到Loader转换的css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                     'css-loader']
            }
        ]
    },
...
 plugins: [
  new MiniCssExtractPlugin({
            filename: ' main.css'
        })
    ]

相关代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    //Js执行入口文件
    entry: './main.js',
    output: {
        // 将所有的依赖的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出的文件都放在dist目录下
        path: path.resolve(__dirname, './dist')
    },
     
    module: {
        rules: [
            {
                // 用正则表达式去匹配要用到Loader转换的css文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                     'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            minify: {
              collapseWhitespace: true,
            },
            hash: true,
          }),
        new MiniCssExtractPlugin({
            filename: ' main.css'
        })
    ]
}