webpack4.0 中使用extract-text-webpack-plugin报错??Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css

来源:4-1 webpack配置css单独分离打包

林无语

2018-07-16 17:25


Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css

写回答 关注

4回答

  • Mr_bigshot
    2018-07-18 14:53:51
    已采纳

    林无语

    非常感谢!

    2018-07-18 15:24:46

    共 1 条回复 >

  • songweifun
    2020-03-03 10:55:22

    在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件,不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中

    基于webpack 3.0的Vue项目

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    config.module.rules.push(
        {
            test:/\.styl(us)?$/,
            use:ExtractTextPlugin.extract({
                fallback:'style-loader',
                use:[
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true
                        }
                    },
                   'stylus-loader'
                   ]
            })
        })
    config.plugins.push(
        new ExtractTextPlugin('styles.[hash:8].css')
    )

    基于webpack 4.0的Vue项目

    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    config.module.rules.push(
        {
        test:/\.styl(us)?$/,
        use:[
            'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader:'postcss-loader',
                options:{sourceMap:true}
            },
            'stylus-loader'
            ]
        }
    config.plugins.push(
        new MiniCssExtractPlugin(
            {
                filename: 'styles.[contenthash:8].css'
            }
        )
    )



  • neoo
    2018-11-12 01:48:46

    我把contenthash改成了hash就编译通过了

    苏新111

    对,成功!

    2019-10-15 14:23:43

    共 3 条回复 >

  • Mr_bigshot
    2018-07-18 14:29:02

    util.js

    删掉 ExtractTextPlugin,改用 MiniCssExtractPlugin 

    ```

    if (options.extract) {

    let extractLoader = {

    loader: MiniCssExtractPlugin.loader,

    options: {}

    }

    return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)

    } else {

    return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)

    }

    ```

Vue+Webpack打造todo应用

用前端最热门框架Vue+最火打包工具Webpack打造todo应用

84606 学习 · 787 问题

查看课程

相似问题