Webpack 配置

source map

我们通过配置 source msp 来实现精确定位错误代码在源文件中的位置。
我们先将 hello.js 代码进行如下修改：

export default function Hello() {
    conole.log('Hello 索大') // 将 console 错写
}

然后在浏览器执行报错，点击 bundle.js 查看报错代码。

发现这个代码并不是我们源文件的代码，这并不利于我们开发，

这里我们就要借助 source map 来配置：

1. 先将 mode 改为 development 模式
2. 新增 devtool 配置 ```javascript const path = require(‘path’) const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // 引入 html-webpack-plugin 插件

module.exports = { entry: ‘./src/index.js’, // 入口文件路径 output: { // 出口文件 filename: ‘bundle.js’, // 出口文件名 path: path.resolve(__dirname, ‘./dist’), // 出口文件路径 clean: true // 生成新文件的同时是否删除旧文件 }, mode: ‘development’, // 设置模式 ‘none’ | ‘development’ | ‘production’ devtool: ‘inline-source-map’, // 帮助定位错误源文件位置 plugins: [ new HtmlWebpackPlugin({ // 实例化 HtmlWebpackPlugin,它将帮我们生成一个 dist/index.html 文件 template: ‘./index.html’, // 指定模板 filename: ‘index.html’, // 生成的文件名 inject: ‘body’ // script标签的生成位置 }) ], }

配置好后我们再来运行 `npx webpack`，然后再浏览器运行，发现错误成功定位到了源文件。
<a name="iFPZP"></a>
### watch mode
用来实时监测 JS文件 的变化，增加开发效率，自动进行打包，无需手动执行 `npx webpack`命令<br />这里我们直接执行`npx webpack --watch`会发现控制台有一个光标提示，然后我们随意修改一下 JS文件，保存，会发现控制台自动执行了打包操作，打开浏览器发现我们代码确实得到修改。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/12391273/1645759477317-3076aee8-1f2b-4c7d-8f1e-0b71a095e001.png#clientId=u84ed349c-6f27-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=161&id=u9bb8f025&margin=%5Bobject%20Object%5D&name=image.png&originHeight=161&originWidth=547&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6421&status=done&style=none&taskId=ub42a48b6-2504-4235-88f1-5db8d67960d&title=&width=547)
```javascript
// hello.js
export default function Hello() {
    console.log('Hello 索大！！！') // 加三个！！！保存
}

webpack-dev-server

webpack-dev-server为我们提供了一个基本的 web server，并且具有 live reloading(实时加载) 功能。

安装

npm install webpack-dev-server -D

配置

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入 html-webpack-plugin 插件

module.exports = {
    entry: './src/index.js', // 入口文件路径
    output: { // 出口文件
        filename: 'bundle.js', // 出口文件名
        path: path.resolve(__dirname, './dist'), // 出口文件路径
        clean: true // 生成新文件的同时是否删除旧文件
    },
    mode: 'development', // 设置模式 'none' | 'development' | 'production'
    devtool: 'inline-source-map', // 帮助定位错误源文件位置
    plugins: [
        new HtmlWebpackPlugin({ // 实例化 HtmlWebpackPlugin,它将帮我们生成一个 dist/index.html 文件
            template: './index.html', // 指定模板
            filename: 'index.html', // 生成的文件名
            inject: 'body' // script标签的生成位置
        })
    ],
    devServer: {
        static: './dist' // 路径
    }
}

启动

npx webpack-dev-server // 启动服务器

在命令行执行上面命令：

我们在浏览器打开上面的地址，localhost是本地地址，另一个是真实ip地址，打开那个都一样。

验证

我们将 hello.js 修改一下

// hello.js
export default function Hello() {
    console.log('Hello 索大') // 去掉！
}

保存，发现浏览器自动刷新了。

注意：

1.我们启动服务器应该从新打开一个控制台，要保证 npx webpack —watch 和 服务器 都在运行中

2.我们这里的出口文件是 dist/index.html 所以直接启动 localhost:8080 即可，若出口文件不是 index.html 需要启动 localhost:8080/文件名，例如 localhost:8080/app.html