webpack-dev-server无法监视新创建的文件

Question

我希望webpack能够检测到新创建文件的更改。

我的完整webpack.config.js文件

module.exports = {
  entry: './src/client/js/index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      { test: /\.scss$/, loaders: ['style', 'css', 'sass']}
    ]
  },

}

我已经搜索过了，但无法找到可以自动将新文件添加到我的监视器中的任何内容。

- Jamie Hutber

---

你正在使用webpack 1还是webpack 2？ - debatanu

很抱歉，在撰写本文时还没有2的东西 :) 1.13.1 - Jamie Hutber

Answer 1

有几种方法可以做到这一点。

1. if you are using cli, then you can write $ webpack-dev-server --content-base src/. More from webpack.

2. if you want the code to be included in you webconfig,

   devServer: {
       contentBase: "./src",
   }
   

   More from weback.

这里的contentBase是你想让webpack-dev-server监听并读取文件的目录。

- debatanu

---

这个回答解决了你的问题吗？ - debatanu

这个对于.js文件可以工作，但是对于我的scss文件不行，我正在测试更多。 - Jamie Hutber

Answer 2

您需要使用以下命令运行服务器：

webpack-dev-server --progress --hot

该命令可以启用进度条和热更新功能。请确保按照此格式输入命令。

- gianlucatursi