Question

我的项目有这样的结构：

\root    
   \webpack.config.js
   \public
     \ index.html
     \ ...
     \ css
     \ directives
     \ views   
     \ dist (webpack output)
       \app.js
       \ index.html
       \ app.js.map   
       \ style.css
       \ style.css.map

当我使用webpack-dev-server时，我从/ root启动它并加载应用程序。但是，当我更改sass文件或html文件时，它不会重新加载。 webpack配置有什么问题？

启动webpack的命令：

$ cd root
$ webpack-dev-server

Webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const webConfig = {
  entry: path.join(__dirname, 'public', 'js', 'app'),
  output: {
    path: path.join(__dirname, 'public', 'dist'),
    filename: 'app.js'
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['.js'],
    enforceExtension: false,
  },
  devtool: 'source-map',
  devServer:{
    contentBase: 'public/',
    publicPath: 'public/'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader'
        }),
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

module.exports = webConfig;

Answer 1

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

“inline”选项为整个页面添加“实时重新加载”。 “hot”选项启用“热模块重新加载”，尝试仅重新加载已更改的组件（而不是整个页面）。如果我们传递两个选项，那么，当源更改时，webpack-dev-server将首先尝试HMR。如果这不起作用，那么它将重新加载整个页面。

尝试将此添加到您的webpack.config文件中：

devServer:{
    contentBase: 'public/',
    publicPath: 'public/',
    inline: true,
    hot: true,
  },

如果需要，还可以从package.json文件中调用脚本。有点像这样：

...
scripts: {
   "watch": "webpack-dev-server --progress --colors --hot --inline",
}
...

Answer 2

只需在您的 devServer 配置中添加选项 watchContentBase: true

停止当前活动并重新加载脚本

devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 9000,
        open:true,
        liveReload: true,
        watchContentBase: true,
      },

webpack-dev-server不会在html或sass更改时重新加载

2 个答案: