webpack4使用笔记
安装webpack
npm install webpack-cli -D
npm install webpack -D在项目目录下可以直接执行 npx webpack 来调用webpack 客户端
webpack默认会打包项目目录下 src/index.js文件 到dist目录
如果要使用import scss的用法 ，可以在css-loader上添加 options属性 importLoaders 让import进来的css也能使用到postcss loader 和sass loader
'
在项目中想使用css模块化的概念
可以在css-loader的options中配置 modules为true
如果你的scss文件中有关于字体的引用比如
你需要用file-loader将这些字体文件也打包的打包目录下 只需这样设置即可
常用plugins的使用
plugins可以在webpack运行到某一时刻时，帮你做一些事情
html-webpack-plugin就是当webpack打包结束时，帮你做一个事情： 将会自动在打包目录下生成index.html文件，并引入打包后的js
我们也可以创建一个index模版文件，配置模版
使用 clean-webpack-plugin 在每次打包时都先删除打包目录
sourceMap的使用
sourceMap是一种映射关系，可以在开发模式中启用，方便追踪到错误的源代码的行数
devtool的其他配置说明
在开发环境的最佳实践 ：使用cheap-module-eval-source-map 兼顾打包速度和错误追踪
在生成环境可以使用 cheap-module-source-map追踪错误 ，如果有必要的话
实现整站实时更新的三种方式：
1 webpack --watch
2 使用webpack-dev-server
设置 devServer的open属性为true可以自动打开浏览器访问打包好的网站内容，值得说的是webpack-dev-server命令并不执行打包动作，而是将打包内容放在内存中运行。
devServer还可以设置porxy
3 利用webpack-dev-middleware
在output下设置根路径
server.js
热模块更新 hot module replacement
首先设置devServer hot和hotOnly为true， hotOnly为true的作用在于当index.html文件失效时，浏览器不会重新请求index.html .
然后在plugins中添加HotModuleReplacementPlugin 就可以实现 更新css或者js时 ，只对所更新的部分刷新，不会自动刷新页面，从而方便调试。
但是如果js局部某些部分做了修改，页面是不会自动刷新的 ，比如你在页面调试阶段 修改了下文中Number函数，页面是不会保留Counter而只重新渲染Number的。要做到保留Counter的值，而只重新渲染Number，可以手动写一些代码，如下：
之所以 css改变 可以做到局部刷新，而js改变要做到局部刷新需要手写代码是因为 css-loader帮忙做了module.hot.accept的判断。而js没有。有些框架的自带的loader也实现了hmr的功能，比如 vue-loader ，所以你在写vue的时候也能实现局部刷新的功能而不额外写代码。
使用Babel处理ES6语法
使用 @babel/preset-env
@babel/preset-env 只是把es6的语法翻译成es5的，无法对es6中新增的函数做转换。
要对es6的新增函数做转化需要借助 @babel/polyfill
首先安装
然后只要把import "@babel/polyfill"; 放到业务代码的顶部就好了，打包的时候@babel/preset-env会把所有es6的新增的函数翻译成普通函数。
如果希望@babel/preset-env能按需翻译 ，可以在webpack config中配置参数useBuiltsIns 为 usage ， 如果useBuiltsIns设置成了usage 则不需要在业务代码中 再次import @babel/polyfill ，webpack会自动把这个功能加上
另外配置target参数也可以根据你对浏览器支持程度的要求来翻译js
使用@babel/plugin-transform-runtime
使用@babel/polyfill 的坏处是它会污染全局环境，如果写业务代码引入@babel/polyfill是ok的，如果你编写的是一个类库或者UI库 最好用
@babel/plugin-transform-runtime的方式
在options参数中增加plugins配置
如果我们不想在webpack config中配置babel-loader的options 也可以不用配置options ，而是将options中的内容写到.babelrc文件中，比如：
对react框架代码的打包
以react业务代码项目为例， 采用@babel/preset-env的方案 配合 @babel/preset-react
先安装 react 和 react-dom
npm insntall react react-dom --save使用 @babel/preset-react
webpack config的配置 babel-loader
在.babelrc 中配置内容 ,presets中的转换是从下到上的 这个顺序不要写错了
业务代码index.js
Tree Shaking的概念
就是如果我们只import 某个js文件中的某一个方法，在打包时，将没有引入的方法剔除掉。
需要注意的是 tree shaking 只支持 es module的引入， 如果是commonjs则不支持 因为es module是静态引入，commonjs是动态引入。 tree shaking只支持静态引入的方式
tree shaking的使用
在开发环境的webpack config文件中配置optimization
在package.json中配置 sideEffects ，来过滤一些tree shaking的负面影响，
比如 @babel/polly-fill, 我们在页面import @babel/polly-fill是并没有引用任何方法，tree shaking会剔除掉polly-fill中的方法，所以我们在sideEffects中把 tree-shaking对polly-fill的影响去除掉。一般情况下 除了polly-fill, 我们对css的引入也会被屏蔽，所以也需要在sideEffects中设置一下：比如 "sideEffects":["@babel/polly-fill","*.scss"]
如果不需要去除任何影响 ，sideEffects可以设为 false 。 即 "sideEffects":false
需要说明的是如果你是在development环境下配置tree shaking 配置成功，打包后的文件还是会包含没有被import出来的方法，这是webpack为了在开发环境调试方便而故意设置的。 如果是在production环境配置以上内容，tree shaking会对打包后的代码起作用。
在production环境下 webpack config可以不用配置optimization项，webpack默认配置好了。
Production和Development模式区分打包
一般在production模式下 webpack config 没有 devServer ， HotModuleReplacementPlugin 和optimization的配置
使用 一个公共的配置文件 将webpack development环境和production 环境共有的配置提取出来，
然后用webpack-merge 工具合并
首先安装 webpack-merge
npm install webpack-merge -D
code spliting 代码分割
自行代码分割的方式
比如业务代码index.js 中使用到了 lodash库 ，我们创建一个lodash.js
在业务代码index.js中不用引用 直接调用
在webpack 配置文件中 设置两个入口
启用webpack自带的代码分割功能
对库项目进行打包
libraryTarge设为umd ，该库可以被 引用的方式包含了 es module ，commonjs 及 requirejs的方式 。常见设置libraryTarget的值有 umd ，this，window，及 global 。 this ，window ，global定义了库的挂载体
library参数设为Library ，则该库可以使用<script>的方式被引用 可以使用Library.xxx的方式调用函数
打包typescript项目
在项目中需要安装 ts-loader和 typescript
npm i -D ts-loader typescript在项目根目录下创建 tsconfig.json文件，设置一些基本配置
webpack的配置
配置打包命令
在Vue Cli 3中配置webpack
