webpack v4版本extract-text-webpack-plugin不再用于css

[songyuhua]

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead. https://github.com/webpack-contrib/extract-text-webpack-plugin

[Anjing1993]

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

1-5使用Plugin demo 进行调整： 1.安装mini-css-extract-plugin 2.修改webpack.config.js为： const path = require('path'); 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 MiniCssExtractPlugin({ // 从 .js 文件中提取出来的 .css 文件的名称 filename: [name]_[contenthash:8].css, }), ] };

[Harhao]

给上面demo一个格式化的代码:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: 'development',
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `[name]_[contenthash:8].css`,
        })
    ]
};