原文地址：

webpack，一代版本一代神，代代版本出大神。如果你的webpack和webpack-dev-server版本大于2小于等于3.6，请继续看下去。其它版本就必浪费时间了。

基本配置

// 入口文件entry: path.resolve(__dirname, 'index.js')// 出口文件output: {    path: path.resolve(__dirname, './dist'),    publicPath: '/dist/',    filename: 'build.js'}

使用webpack-dev-server命令生成的出口文件在资源目录是看不见的(据说是被保存到内存里面了)。我们的index.html可以大胆引用这个“不存在”的文件：

loader配置

这里仅以babel-loader为例

module: {    rules: [        {            // /(\.jsx|\.js)$/            test: /(\.js)$/,            use: {                loader: "babel-loader",            },            exclude: /node_modules/        }    ]}

.babelrc配置

{  "presets": [    ["env", { "modules": false }]  ]}

devServer配置

devServer: {    port: '8080',    overlay: true,    proxy: {    }}

启动命令

// --open表示直接打开浏览器，--hot表示开启热更新webpack-dev-server --open --hot

最新的webpack 4 有待研究