webpack 辅助高效开发

第 9 阶段：搞懂、搞透前端构建第 6 天

在前几节内容中，预览 html 文件时都是在浏览器中直接打开，今天换一种更高效的方式，利用 webpack 提供的 webserver 来预览网页。

webserver 的本质是在电脑上开启了一个 web 服务，这样能够帮助开发者更高效地开发网站。关于网络详细内容可以学习前端小课 第三阶段结语：告别网络编程，详细讲解了 HTTP 协议、socket、webserver 等内容。

webpack-dev-server 是 webpack 的一个独立项目，可以在 https://github.com/webpack/webpack-dev-server 下载源码。下面通过一个项目来学习使用 webpack 辅助高效开发：

1、直接复制 day5-html-webpack-plugin，修改文件夹名为 day6-dev-server，在 day6-dev-server 目录下执行npm i -D webpack-dev-server，安装 webpack-dev-server。

2、配置 webpack.config.js

设置端口为 9000，contentBase 指定 webserver 的根目录，也就是我们打包后的文件根目录：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
}

3、配置 package.json

在 npm script 添加指令，start:home: 默认打开 home.html；

"scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --open",
    "start:home": "webpack-dev-server --open-page home.html",
    "start:topic": "webpack-dev-server --open-page topic.html",
    "watch": "webpack --config webpack.config.js --watch"
},

4、执行 npm run start 后，会自动打开浏览器，打开根目录，此时你可以点击任意文件进行预览；

5、执行 npm run start:home，会自动打开浏览器并打开 home.html

除此之外，webpack-dev-server 还自带了 reload 功能，当有代码修改时，将自动编译，浏览器自动刷新。

当代码出错时，浏览器开发工具并不能把问题定位到具体的文件，只会定位到打包文件的位置，如下图：

遇到这种情况可以修改 webpack.config.js，添加一行代码 devtool: 'inline-source-map'，最终配置文件如下：

module.exports = {
    // 设置打包方式，支持 development 和 production
    mode: 'development',
    // 打包入口文件w
    entry: entry,
    // 最终打包结果配置
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: plugins,
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
}

当遇到错误时，可直接定位到代码的具体位置：

关于 devtool 的配置还有很多值，可以通过 https://github.com/webpack/webpack/tree/master/examples/source-map 学习关于 source-map 的知识。最后，诚挚邀请你来思考下面的问题并打卡：

1、有没有关于调试的一些技巧分享给大家？

大家加油！

---

推荐阅读：

使用 webpack 动态生成 html

从使用 loader 到实现 loader · webpack