Question

我正在使用webpack来管理我的Web应用程序并使用webpack-dev-server来开发Web服务器。我知道webpack dev服务器有一个--watch开关来观察源代码更改的内容。但是当我运行webpack-dev-server --watch命令然后更改源代码时，它不会重新加载源代码。我必须关闭服务器然后运行webpack命令重新捆绑我的目标文件。下面是我的webpack-config.js文件，它有watch：true配置。我不明白为什么webpack-dev-server无法观察源代码的变化。

module.exports = {
entry: {
    app: PATHS.app
},
output: {
    path: PATHS.build,
    filename: 'app.bundle.js',
},
watch: true,

resolve: {
  extensions: ['', '.js', '.jsx','.css'],
  modulesDirectories: ['node_modules'],
  alias: {
    leaflet_css: __dirname + '/node_modules/leaflet/dist/leaflet.css',
    normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
    main_css: __dirname + '/src/style/main.css'
  }
},
module: {
    // preLoaders: [
    //   {
    //     test: /\.js$/, 
    //     loader: "source-map-loader"
    //   }
    // ],
    loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets=es2015'
    },
    { test: /\.css$/, loader: 'style-loader!css-loader' },
    { test: /\.png$/, loader: "url-loader?limit=100000" },
    { test: /\.jpg$/, loader: "file-loader" },
    {
        test: /\.js$/, 
        exclude: /node_modules/,                
        loaders: ['babel-loader?presets=es2015']
    }
    ]
},
plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
        },
        output: {
            comments: false,
        },
    }),
    new NpmInstallPlugin({
        save: true // --save
      })
],
devServer: {
    colors: true,
    contentBase: __dirname,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 8081,
    progress: true,
    stats: {
      cached: false
    }
  }

Answer 1

听起来您的html文件<script>标记指向从contentBase目录中提供的包（请参阅您的webpack配置文件）。默认情况下，webpack-dev-server永远不会监视contentBase的更改，因此不会发生实时重新加载。您必须手动重新加载服务器或清除浏览器缓存，然后刷新浏览器。如果正确配置webpack-dev-server，则不应该要求它。

将您的html文件<script>标记指向由publicPath提供的包。

要记住的主要事情是webpack-dev-server永远不会在你的文件系统中创建一个实际的bundle文件，它是从内存中创建和提供的。

本文全面介绍了webpack-dev-server最常见的症状，不是实时重新加载（https://medium.com/code-oil/burning-questions-with-answers-to-why-webpack-dev-server-live-reload-does-not-work-6d6390277920）

webpack-dev-server --watch不起作用

1 个答案: