webpack(5) -开发环境

使用 source map （仅用于开发环境）

当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。

为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

//webpack.config.js 配置文件中加入
devtool: 'inline-source-map'

选择一个开发工具

1. webpack watch mode(webpack 观察模式)

   • 指示 webpack "watch" 依赖图中所有文件的更改。如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。

   • //在package.json中
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch": "webpack --watch",
         "build": "webpack"
       },

     然后运行 npm run watch  ,当你改变一个文件时候，代码就会自动重新编译

   • 缺点：需要手动刷新浏览器获取最新的结果

2. webpack-dev-server   （用的最多）

   • 提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能

   • npm install --save-dev webpack-dev-server

     //在webpack.config.js中加入 
     //配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。（译注：serve，将资源作为 server 的可访问文件）
     //webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样
      devServer: {
         contentBase: './dist'
       },

      //在package.json中添加 npm scripts
      "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch": "webpack --watch",
         "start": "webpack-dev-server --open",
         "build": "webpack"
       },

     然后运行 npm start (不要加run)，这时候会自动在浏览器中打开页面，然后修改任何资源保存，web server 将在编译代码后自动重新加载（浏览器会自动更新，无需手动刷新）

   • webpack-dev-server 在编译之后不会写入到任何输出文件，即dist文件夹中是空的，没有任何文件！！！

　　3、webpack-dev-middleware  详见官网：https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-source-map