webpack-dev-server无法在html或sass更改时重新加载 [英] webpack-dev-server not reloading on html or sass change

问题描述

我的项目具有以下结构:

My project has this structure:

\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配置有什么问题?

when i use webpack-dev-server I launch it from /root and it loads the app. But, when i change a sass file or html file it does not reload. What is wrong with the webpack config?

启动webpack的命令:

Command to launch webpack:

$ cd root
$ webpack-dev-server

Webpack.config.js

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;

推荐答案

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

内联"选项为整个页面添加实时重新加载"."hot"选项启用"Hot Module Reloading"，从而尝试仅重新加载已更改的组件(而不是整个页面).如果我们同时传递了这两个选项，则当源更改时，webpack-dev-server将首先尝试执行HMR.如果这不起作用，那么它将重新加载整个页面.

"inline" option adds "Live reloading" for the entire page. "hot" option enables "Hot Module Reloading" that tries to reload just the component that’s changed (instead of the entire page). If we pass both options, then, when the source changes, the webpack-dev-server will try to HMR first. If that doesn’t work, then it will reload the entire page.

尝试将其添加到您的webpack.config文件中:

Try adding this to your webpack.config file:

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

如果需要，还可以从package.json文件中调用脚本.像这样的东西:

If you want, you can also call a script from your package.json file. Some thing like that:

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

这篇关于webpack-dev-server无法在html或sass更改时重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！