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中比较经常使用的一些实战配置了，详细配置还请翻阅文档进行学习；