webpack-dev-server怎么配置，实现实时自动刷新？

Question

执行 webpack-dev-server --inline --hot命令后， 更改index.html后，刷新可以更新，但是css与js没有编译，该怎么配置可以实现实时的编译预览呢？

webpack.config.js配置如下

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './dev/js/main.js',
    output: {
        path: path.resolve(__dirname, './src'),
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

package.json配置如下

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --inline --hot --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.26.1",
    "file-loader": "^0.10.0",
    "style-loader": "^0.13.1",
    "vue": "^2.1.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Answer 1

webpack.config.js文件中为什么没有关于.html,.js,.vue文件解释器的配置？

Answer 2

找vue文档下载vue脚手架，直接运行就有你想要的监听

Answer 3

//  相关的包下下来
var hotMiddleware = require('webpack-hot-middleware')(compiler)
      // force page reload when html-webpack-plugin template changes
  compiler.plugin('compilation', function(compilation) {
      compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
          hotMiddleware.publish({ action: 'reload' })
          cb()
      })
  })

app.use(hotMiddleware)

Answer 4

有一个叫hot的参数，叫预热处理还是什么的。

devServer: {

historyApiFallback: true,
hot: true,
inline: true,
progress: true

}

Answer 5

本地服务器配置

    devServer: {
        //contentBase: DEV_PATH,
        historyApiFallback: true,
        hot: true,
        open: true,
        inline: true,
        port: 3333
    },

热插拔插件,监听文件变化实现自动刷新

plugins:[
new webpack.HotModuleReplacementPlugin()
]

可以参考我写这个webpack2.0的配置,每一行代码都有注释

github地址

Answer 6

这两边按着这个配置一下试试可以么，我的这样配置可以自动刷新了。

output: {

filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath:"dist"

},
devServer: {

 contentBase: "."

}

// 或者
output: {

filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),

},
devServer: {

contentBase: './dist',
hot: true

}