webpack的HMR模式配置问题

肥皂泡
  • 303

我在网上看说配置里
hot: true,
inline: true
,有这两个参数就表示HMR模块启用了,不用再 new webpack.HotModuleReplacementPlugin()配置插件了。
但是控制台还是报错HMR。只好两个都用上才好。高手帮我看下是那个配置有问题吗。

var path = require('path');
var webpack=require('webpack');
var node_modules = path.resolve(__dirname, 'node_modules');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, 'build');
var BUILD_PATH = path.resolve(ROOT_PATH, 'app');
module.exports = {
    entry: [path.resolve(__dirname, './app/components/components.jsx')],

    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name][hash:5].js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,
                exclude: [               //exclude表示的是不用匹配的文件夹
                    path.resolve(__dirname, "node_modules")
                ],
                use: [                      //use的值是一个数组,它里面存放了我们处理test匹配到的文件需要加载的loader和loader的配置
                    {
                        loader: "babel-loader"        //这个就是需要加载loader的名字

                    }
                ]
            },
            { test: /\.css$/, loader: "style!css"},

            { test: /\.(png|jpg)$/, loader: 'url?limit=8192'}
        ]
    },
    // 开启dev source map
    devtool: 'eval-source-map',
    // 开启 webpack dev server
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true
        //progress: true
    },
    // 配置plugin
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlwebpackPlugin({
            title: 'react-webpack-demo',
            filename: 'index.html',
            template: path.resolve(SRC_PATH,'index.html'),
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                removeAttributeQuotes: true
            }
        })
    ]
};

刚开始看webpack,大家顺便帮我看看哪些配置还有问题。好多都是直接从网上扒的。

https://segmentfault.com/q/10...

回复
阅读 2.1k
1 个回答
宣传栏