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

      

      //在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-dev-middleware  详见官网：https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-source-map