Webpack实战配置

这是我参与更文挑战的第3天，活动详情查看：更文挑战

webpackDevServe的作用是什么？

每一次，我们改变完了我们的代码，如果想正确的能够在浏览器上运行，都需要在npm run build后手动打开dist目录下的html文件，这样办才能实现代码的重新编译运行。这样的话，实际上我们的开发效率是非常低下的。我希望如果我改动了代码，那么dist目录就会自动重新打包，如果能达到这种效果就不用每次打包后手动开启html了，下面我们来看下如何实现。

// 安装 npm i -D webapck-dev-server
module.exports = {
    devServer: {
        open: true,
        port: 3000,
        hot: true,
        hotOnly: true
    },
}
复制代码

我们借助devServer开启了一个本地服务器

• open是什么意思呢？
  • 意思是在运行npm run dev启动webpackDevServe的时候open会自动帮你打开一个浏览器，然后自动地访问你本地的地址，默认就是localhost:8080;
• port是什么意思呢？
  • 意思是设置启动的端口号，默认是8080，如果需要进行更改就使用port，例如上述代码把端口号改为3000运行；
• hot是什么意思呢？
  • 启用webpack的热模块替换特性。DevServe默认的行为是在发现源代码背更新后会通过自动刷新整个页面来做到实现预览，开启模块热替换功能后在不刷新整个页面的情况下通过用新模块替换老老模块来实现实时预览。
• hot和hotOnly的区别是什么？
  • 单纯设置hot为true，如果编译报错，会抛出错误，你重新改成正确的，这个时候又会触发重新编译，整个浏览器都会重新刷新!
  • 把hotOnly也设置的话，如果编译报错，你在改成正确的，重新编译，浏览器不会刷新!

如何配置source-map？

什么是Source Map?

在前端开发过程中，通常我们编写的源代码会经过多重处理(编译 封装 压缩等)，最后形成产物代码。于是在浏览器中调试产物代码时，我们往往会发现代码变得面目全非，报了一个错却找不到在哪一行，因此，我们需要一种在调试时将产物代码显示回源代码的功能，source map就是实现这一目标的工具。

对于同一个源文件，根据不同的目标，可以生成不同效果的source map。它们在构建速度 质量 访问方式和文件大小等方面各不相同。在开发环境和生产环境下，我们对于source map功能的期望也有所不同：

• 在开发环境中，通常我们关注的是构建速度快，质量高，以便提升开发效率，而不关注生成文件的大小和访问方式。
• 在生产环境中，通常我们更关注是否需要提供线上 soource map，生成的文件大小和访问方式是否会对页面性能造成影响等，其次才是质量和构建速度。

module.exports = {
    mode: 'development',
    devtool: 'eval-cheap-modulesource-map',
}
复制代码

source map的预设有很多想了解的可以去官网查阅，不同的预设会影响到构建的速度以及包的大小和生成方式,如果在生产环境中不需要查看报错行数的可以不设source map提升页面性能。

开发环境预设推荐eval-cheap-modulesource-map它的质量与初次/再次构建速度都属于次优级，以牺牲定位到列的功能为代价换取更快的构建速度通常也是值得的。

总结

以上就是webpack中比较常用的一些实战配置了，详细配置还请翻阅文档进行学习；