webpack4 + vue2
建立
git int
npm init -y
npm i -D webpack@4 webpack-cli
npm i vue
初步链接
public/index.html; src/main.js
webpack.config.js
HtmlWebpackPlugin: npm install -D html-webpack-plugin@4
loader-utils 熟悉loader plugin
vue
App.vue
vue-loader:
npm install -D vue-loader vue-template-compiler
安装冲突
安装css-loader@5，继续安装vue-loader vue-template-compiler
Layout.vue scss
安装style-loader@2 sass sass-loader@10
安装 normalize.css
安装 vue-router /src/router.js 设置@前缀，先设置hash
server
# 开发环境 npm install --save-dev webpack-dev-server@3 webpack-cli@3
history模式 historyApiFallback: true,port: 8333
设置网站icon，public资源打包 CopyWebpackPlugin npm i -D copy-webpack-plugin@5
url
file-loader esModule: ``false，图片显示还是有问题。是否被server转发了history模式，应该不是。是svg声明删多了xmlns
加一张大图
npm i url-loader -D
clean
安装 clean-webpack-plugin
postcss-loader
安装 npm i -D postcss-loader@4 autoprefixer，注意postcssOptions改变
合并css，安装npm i -D mini-css-extract-plugin@1
babel
安装 npm i -D babel-loader @babel/preset-env @babel/core
环境
build文件夹 webpack.prod.js webpack.dev.js，安装npm i -D webpack-merge，注意 merge使用方式改变。
抽离不同环境配置，注意目录改变
extensions、noParse
缓存
npm i -D cache-loader
打包分析
npm i -D webpack-bundle-analyzer
压缩
npm i -D uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin
轻量map devtool: 'cheap-module-source-map',
cacheGroups （反而会大几KB，但可以看chunck）
prefetch & preload
html-webpack-plugin插件 # resource-hints-webpack-plugin
npm i -D resource-hints-webpack-plugin
没反应？换成 @vue/preload-webpack-plugin。版本对不上
npm i -D preload-webpack-plugin@3.0.0-beta.4
