webpack4-搭建开发环境

作用：搭建开发环境后，将不用手动将模板地址复制到浏览器来观看效果

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  entry:"./src/index.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true
  },
  // 不设置mode时可赋值为none，不设置会报错
  mode:"development",
  // 1.精准定位错误位置2.使打包文件中的代码显示原来的代码
  devtool:"inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template:"./index.html",
      filename:"app.html",
      inject:"body"
    })
  ]
}

如何将打包后文件变成易于阅读的（source map）

在导出对象中添加 devtool:”inline-source-map” 属性，
添加后的打包文件中的代码将会显示原来的代码

npx webpack —watch 热编译打包

执行npx webpack命令，npx依托于npm，它的作用就是观察在当前目录下有没有你想运行的命令，没有就会去上一级目录寻找。
在编译打包时 使用 npx webpack —watch
会实时监控代码的变化，每当代码变化并保存后，就会自动编译

webpack-dev-server -D 自动刷新

webpack-dev-server将打包后的文件放到了内存里，这时即使把dist文件加删掉，你再次修改文件内容也会更新页面内容
安装 npm i webpack-dev-server -D
配置：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.export = {
  entry:"./src/index.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,"./dist"),
    clean:true
  },
  // 不设置mode时可赋值为none，不设置会报错
  mode:"development",
  // 1.精准定位错误位置2.使打包文件中的代码显示原来的代码
  devtool:"inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template:"./index.html",
      filename:"app.html",
      inject:"body"
    })
  ],
  devServer:{
    // 指向的物理路径
    static:"./dist"
  }
}

执行命令：npx webpack-dev-Server，进入localhost

点击打包后的index.html文件（这时网页的实时更新和热模块更新都开启了，每次保存文件就会触发）
执行命令：npx webpack-dev-Server —open 会直接到开浏览器显示