webpack 报错集合

[shaobeichen]

报错：ERROR in chunk common [entry] /dist/js/[name][chunkhash].js Cannot use [chunkhash] for chunk in '/dist/js/[name][chunkhash].js' (use [hash] instead)

ERROR in chunk common [entry]
/dist/js/[name]_[chunkhash].js 
Cannot use [chunkhash] for chunk in '/dist/js/[name]_[chunkhash].js' (use [hash] instead)

解决方法：
热更新(HMR)不能和[chunkhash]同时使用。

• 如果是开发环境，将配置文件中的chunkhash 替换为hash。
• 如果是生产环境，不要使用参数 --hot或者取消热更新。

ExtractTextPlugin 打包less无效果

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: {// 这里表示不提取的时候，使用什么样的配置来处理css
                        loader: 'style-loader',
                        options: {
                            singleton: true // 表示将页面上的所有css都放到一个style标签内
                        }
                    },
                    use: [ // 提取的时候，继续用下面的方式处理
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true  // 开启压缩
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                minimize: true  // 开启压缩
                            }
                        }
                    ]
                })
            }
        ]
    }

plugins: [
    new ExtractTextPlugin({
            filename: '/css/[name].[hash].css', // 配置提取出来的css名称
            allChunks: true
        }),
]

解决方法：
很简单，其实就是提取出来css路径错误了。

plugins: [
    new ExtractTextPlugin({
            filename: 'css/[name].[hash].css', // 配置提取出来的css名称
            allChunks: true
        }),
]

webpack 用url-loader打包less里面的图片并显示，html里面不行

解决方法：
使用html-loader。

npm i html-loader -s

{
                test: /\.html$/,
                use: {
                    loader: 'html-loader',//可以处理在html中的img图片
                    options: {
                        // ignoreCustomFragments: [],
                        // root: path.resolve(__dirname, 'src'),
                        // attrs: ['img:src']
                    }
                }
}