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'

选择一个开发工具

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 ,当你改变一个文件时候，代码就会自动重新编译
- 缺点：需要手动刷新浏览器获取最新的结果

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文件夹中是空的，没有任何文件！！！

巴特西

webpack(5) -开发环境

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

选择一个开发工具

webpack watch mode(webpack 观察模式)

webpack-dev-server （用的最多）

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

最新文章

热门文章