webpack : 边配置边记录

关于安装：

---

安装一个要打包到生产环境中的包:

npm install --save

安装一个用于开发环境中的包:

npm install --save-dev

执行 npx webpack , 会将我们的脚本作为入口起点, 然后输出为 main.js

npm run build == npx webpack == npx webpack --config webpack.config.js

查看webpack版本:

npm info webpack

webpack核心概念

---

项目中常见需求

---

1. 解决es6编译问题

npm instll --save-dev babel-loader @babel/cli
// @babel/core 是babel中的一个核心库

npm instll --save-dev @babel/preset-env
// preset-env就是将语法翻译为es5语法

npm install --save-dev @babel/plugin-transform-runtime

2. 解决webpack警告: 关于mode的配置

-- npm scripts 中的命令执行
-- node 的全局变量的属性  process.argv
-- yargs 安装

3. 引入 HtmlWebpackPlugin

-- 自动创建模板并引入所有的bundle(解决打包出来的 js 文件名与 html 中引入的 js 文件名统一的问题)

4. 引入 CleanWebpackPlugin

-- 清除 dist 文件夹下没用的文件

5. 使用devtool配置source-map

-- 使得浏览器可以看到源代码

development环境下,配置 devtool:'cheap-module-eval-source-map'
production环境下,配置 devtool:'cheap-module-source-map'

6. 使用 webpack-dev-server

--  提供了一个简单的web服务器, 并且能够实时重新加载
-- 也可以使用 express 结合 webpack-dev-middleware 实现该功能

7. 安装 webpack-merge

-- 将基础 webpack 配置与环境需要的 配置合并

8. 安装 uglifys-webpack-plugin

--  文件压缩   【js  or   all 】

9. 安装 webpack-bundle-analyzer

-- 分析 bundle 内容

10. 使用懒加载

-- 思路: 将代码合理拆分为小块,在用到的时候再加载
-- React 的实现方式: https://reacttraining.com/react-router/web/guides/code-splitting
@babel/plugin-syntax-dynamic-import  
和  loadable-components

-- Vue 的实现方式: https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/

三个级别:  组件   路由  Vuex 模块 

将 import 函数包装在箭头函数中, Vue 仅在请求时执行他

11. 使用缓存

-- 解决部署一致性和资源可缓存问题