自动编译及热加载

模式均在开发模式下

webpack启动监控自动编译

"watch": "npx webpack --watch --config webpack.dev.js",
注：不必每次都运行，但是任然需要刷新页面。

开启js的sourceMap（显示js的原始位置）

devtool:'inline-source-map',
注：将该语句放在根下。

启用webpack-dev-server和热更新

webpack-dev-server提供webpack服务器，并且提供实时重新加载。
devsever直接在内存里面编译（所以dist目录并没有产生），运行速度快
npm install --save-dev webpack-dev-server

//放在根下
devServer: {
+     contentBase: './dist'
+   }

启动webserver
webpack-dev-server --open
启动热加载

 const webpack = require('webpack');
devServer: {
      contentBase: './dist',
+     hot: true
    },
plugins: [
+     new webpack.NamedModulesPlugin(),  // 更容易查看(patch)的依赖
+     new webpack.HotModuleReplacementPlugin()  // 替换插件
    ],

js ->babel转码

npm i -D babel-loader babel-core babel-preset-env

rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,  // 加快编译速度，不包含node_modules文件夹内容
      use: {
        loader: 'babel-loader'
      }
    }

在项目根目录下，添加babel的配置文件 .babelrc.

babel 在每个文件都插入了辅助代码，使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码, 默认情况下会被添加到每一个需要它的文件中。你可以引入 babel runtime 作为一个独立模块，来避免重复引入。
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save

.babelrc
{
  "presets": ["env"],
  "plugins": [
    ["transform-runtime", {
      "helpers": true,
      "polyfill": true,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}