file-loader

给图片或者文件一个可拜访的地址
outputPath:打包的相对路径
publicPath:拜访门路，例如图片的src地址，绝对于html页面而言

Reference：webpack配置文档——publicPath

url-loader

将图片生成base64编码打包进boundle.js文件中。

  • 如果图片比拟小，则能够应用url-loader打包进js中，缩小一次http申请。
  • 如果图片较大，则将图片应用file-loader打包进独自的文件夹中，配置拜访门路拜访。（应用limit:2048来管制）


将css进行模块化打包：modules:true

应用：

postcss-loader

主动增加厂商前缀，另需postcss.config.js配置文件，其中装置autoprefixer插件，（babel）

HtmlWebpackPlugin

在打包完结后主动生成html文件并引入boundle.js文件。

clean-webpack-plugin

在每次构建前清理 /dist 文件夹
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),:在watch模式下触发增量构建时不删除index.html文件。

Reference：webpack文档——治理输入

devtool（source-map）

论断：

  • 在开发环境举荐应用 devtool: 'cheap-module-eval-source-map', 提醒比拟全，且打包速度比拟快。
  • 线上环境举荐应用 devtool: 'cheap-module-source-map'。

devtool: 'inline-source-map':将source-map文件通过[data]URL的模式写入打包好的js文件底部。

devtool: 'source-map':打包会生成source-map文件。
devtool: 'cheap-inline-source-map': 应用cheap更节约性能，检索谬误只准确到行，不准确到列，且只关怀业务代码。
devtool: 'cheap-module-inline-source-map':相比于cheap,增加了module就会将谬误检索准确到第三方模块和loader等。
devtool: 'eval':性能最好。将错误代码应用eval()执行，与源文件间接进行映射。

举荐浏览：
https://segmentfault.com/a/1190000008315937
https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://www.youtube.com/watch?v=NkVes0UMe9Y

主动编译代码

webpack 提供几种可选形式，帮忙你在代码发生变化后主动编译代码：1. webpack watch mode(webpack 察看模式)2. webpack-dev-server3. webpack-dev-middleware

  • devServer

devServer打包的文件寄存在内存中而不是磁盘中以晋升打包速度，所以dist目录下没有文件。
拜访文件时按门路拜访即可。

    • HMR

热更新对于css而言，style-loader底层曾经配置过 module.hot.accept 配置，所以无需再代码中配置，然而在js文件中，须要以下的配置。

if (module.hot) {     module.hot.accept('./print.js', function() {        console.log('Accepting the updated printMe module!');        printMe();     })}

Reference：
https://webpack.docschina.org/concepts/hot-module-replacement/
HMR配置

babel-loader

将es6代码转化为es5代码，适应各种浏览器的兼容性