基础配置
webpack webpack-cli
mode
output { publicPath }
entry
devServer
配置 webpack.config.js (vue-cli2) / vue.config.js (vue-cli3)
HTML插件
html-webpack-plugin
[removeAttrbuteQuotes, collapseWhitespace, chunk] 清除双引号/空格/添加哈希值
样式处理
(注：vue-cli3默认已安装)
optimize-css-assets-webpack-plugin 将CSS提取为文件并压缩CSS
uglifyjs-webpack-plugin 压缩JS
postcss-loader autoprefixer 兼容前缀
style-loader [insertAt]
css-loader
less-loader
JS高级语法解析
babel-loader @babel/core @babel/preset-env
全局变量引入(2种方式)
webpack.plugin.externals
$ npm add expose-loader
import 'expose-loader?$!jquery'
import 'expose-loader?jQuery!jquery'
import 'expose-loader?_!lodash'
图片处理
(注：vue-cli3默认已安装,除了html-withimg-loader)
动态响应存在哈希值的图片
import img from '/src/img.png' js方式
file-loader css方式
html-withimg-loader html方式
url-loader 限制图片大小，转为base64
配置source-map
devtool:'source-map' 添加映射文件，可以帮我们调试打包后代码
eval-source-map
cheap-module-source-map
cheap-module-eval-source-map
