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-server
3. 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 代码,适应各种浏览器的兼容性