webpack-dev-server 不监视我的文件更改 [英] webpack-dev-server does not watch for my file changes

问题描述

当我在 webpack-dev-server 运行时更改我的文件时，bundle 的文件没有更新.这是我的 webpack.config.js 和 package.json 文件，正如你从我的 npm 脚本中看到的，我已经解决了运行 webpack watch 和 webpack-dev-server在同一命令中(npm run watch & webpack-dev-server --content-base ./--port 9966):

When I change my files while webpack-dev-server is running, the bundle's files are not updated. Here are my webpack.config.js and package.json files, as you can see from my npm script, I've solved running webpack watch and webpack-dev-server in the same command (npm run watch & webpack-dev-server --content-base ./ --port 9966):

webpack.config.js:

webpack.config.js:

'use strict';

var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpack = require('webpack');

module.exports = {
    devtool: 'sourcemap',
  entry: ['./js/main.js'],
  output: {
    filename: 'bundle.js',
    path: __dirname + '/assets',
    publicPath: __dirname + '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [
          ReactStylePlugin.loader(),
          'jsx-loader?harmony'
        ]
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader')
      }
    ]
  },
  plugins: [
    new ReactStylePlugin('bundle.css'),
    new webpack.DefinePlugin({
      'process.env': {
        // To enable production mode:
        //NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

package.json:

package.json:

{
  "name": "reactTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "web": "npm run watch &  webpack-dev-server --content-base ./ --port 9966"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.10.1",
    "extract-text-webpack-plugin": "^0.3.8",
    "jsx-loader": "^0.13.1",
    "react-style-webpack-plugin": "^0.4.0",
    "style-loader": "^0.10.2",
    "url-loader": "^0.5.5",
    "webpack": "^1.8.5",
    "webpack-dev-server": "^1.8.0"
  },
  "dependencies": {
    "react": "^0.13.1",
    "react-style": "^0.5.3"
  }
}

我的目录结构是:

assets  
  bundle.css
  bundle.css.map    
  bundle.js 
  bundle.js.map 
js
  AppActions.js
  Profile.css.js
  ProfileList.js
  main.js
  AppConstants.js
  AppStore.js       
  Profile.js
  ResultPage.js     
package.json
index.html
node_modules
webpack.config.js

assets 目录下的每个文件都是由 webpack 生成的

every file inside assets directory is generated by webpack

推荐答案

你需要使用 --hot 标志运行 webpack-dev-server:

you need to run webpack-dev-server with the --hot flag:

webpack-dev-server --content-base ./--port 9966 --hot

然后就可以访问热加载版localhost:9966/webpack-dev-server/

Then you can access the hot-loading version localhost:9966/webpack-dev-server/

您也不需要运行 watch.

You don't need to run watch as well.

webpack 配置中的此项必须更改:

This entry in your webpack config must change:

条目:['./js/main.js'], -->入口:['webpack/hot/dev-server', './js/main.js']

更改您的 publicPath 条目:

Change your publicPath entry:

publicPath: '/assets/'

这篇关于webpack-dev-server 不监视我的文件更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！