相关代码

一、mode 选项

webpack.config.js：

module.exports = {
    mode: 'development'    // 开发模式，可选值有："production" | "development" | "none"
}

二、使用 source map

当多个 js 文件被打包到一个 bundle 中，而其中某个源文件包含错误，那么堆栈跟踪就会指向 bundle.js，而不是出错的源文件。

为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。

在 webpack.config.js 中使用 inline-source-map：

module.exports = {
    devtool: 'inline-source-map'    // 在开发模式下追踪代码
}

三、使用 watch mode（观察模式）

每次编译代码时，都要手动执行 npx webpack。如果想让 Webpack 在文件更新时自动编译，可以在后面加上 --watch 参数，即：

npx webpack --watch

此时，光标就会停留在最后一行，检测文件的变化：

当某个文件被修改，Webpack 就会自动编译。

四、使用 webpack-dev-server

webpack-dev-server 提供了一个基本的 web server，并且具有 live reloading（实时重新加载）功能。

安装：

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

webpack.config.js：

module.exports = {
    devServer: {
        static: './dist'    // 告知 devServer，将 dist 目录作为 web 服务的根目录
    }
}

注意：webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。

执行命令：

npx webpack serve --open

此时，在浏览器中就可以直接访问页面，当有文件被修改时，浏览器会自动刷新。