鍍金池/ 問答/HTML/ webpack的HMR模式配置問題

webpack的HMR模式配置問題

我在網(wǎng)上看說配置里
hot: true,
inline: true
,有這兩個參數(shù)就表示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的值是一個數(shù)組,它里面存放了我們處理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,大家順便幫我看看哪些配置還有問題。好多都是直接從網(wǎng)上扒的。

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

回答
編輯回答
耍太極

https://webpack.js.org/guides...
https://doc.webpack-china.org...

你從哪看的文檔? 這中英文檔里都表示需要使用 webpack.HotModuleReplacementPlugin 這個插件啊? 沒有提到要在 devServer 里加 inline: true啊,

你也可能參考我的配置: https://github.com/shrekuu/tr...

2017年11月25日 04:32