webpack4的学习记录点，待知识点全部梳理一遍写一个webpack4的小册子

零散

  • 命令里面 - - （笔记不好识别 中间没有空格的）是传参的意思 npm run build — —config webpack.config.dev.js 硬写的话要这么写 才是传参

  • loader 数组里从右到左执行

babel

把es5转化成es6 但是一些新的语法 比如es7的 还有一些高级语法 是不会被识别的

所以要加入：

代码运行时的包

插件 js babel里加的plugin 是开发环境下的依赖：@babel/plugin-transform-runtime

上线的时候需要打出来的这个补丁 所以—save需要@babel/runtime

es7 实例上的方法 @babel/polyfill

引入第三方模块（全局变量引入问题）

比如jquery

1.expose-loader 暴露到window上（在引入的页面或者webpack的loader里面加内联loader都可以）

2.这样在每个模块中注入$ 就可以直接用$不需要引入了

webpack.ProvidePlugin({

​ $:’jquery’

})

引入cdn 且external掉jq

（运用的地方用了import进来 不用的话其实就不会被打包进来）

用external可以让引入的包不被打包

图片的引入：

1.js中 require 需要file-loader

2。css中可以直接用 因为css-loader处理了这个事情 background：’url(….)’ css-loader会做转化 去吧括号里的路径require进来 从而引入

伪代码：url(require(‘./sss.png’))

3.html中引入（纯html和js 框架里可以引入的）

使用html-withimg-loader 这个loader

如果有的时候页面很多小图 不想要http请求 就用base64

这时候可以使用url-loader

rules里面test匹配图片 然后配置 图片大小小于“多少k”（options里配置limit） 的就用url-loader转化成base64 大于就用file-loader

这时候就不会请求了 但是base64图片会比正常请求的图片大3分之1

publicPath：

如果把一些资源放在cdn上了的话，可以给output加publicPath，就会在所有路径前面加上地址（如果只要在图片上加的话 就在图片的loader上加publicpath啥的）

MiniCssExtractPlugin用的时候要注意css内的图片寻址错误 所以也要加publicPath

{

​ loader: MiniCssExtractPlugin.loader,

​ options: {

​ // 复写 css 文件中资源路径

​ // webpack3.x 配置在 extract-text-webpack-plugin 插件中

​ // 因为 css 文件中的外链是相对与 css 的，

​ // 我们抽离的 css 文件在可能会单独放在 css 文件夹内

​ // 引用其他如 img/a.png 会寻址错误

​ // 这种情况下所以单独需要配置 publicPath，复写其中资源的路径

​ //

​ publicPath: ‘../‘

​ }

}

三个小插件：

1.clean插件 删除文件夹

2.copy插件 打包的时候把项目中的文件复制进dist

3.webpack内置的插件bannerPlugin 可以加文字在打包的js文件前面 版权标识

前端解决跨域的三种方式（webpack）

1.代理：devserver配置proxy， rewrite接口地址

2.纯前端mock数据 devserver加before方法 参数是express的app的钩子 可以把获取数据的方法写到里面去

3.服务器端启动webpack 使得前后端启动在一个端口上 express加上中间件 启动webpack devserver（webpack的compile传进sever 在middlerware中启动）

resolve属性 (解析

1.modules 从哪里开始查依赖（避免一直往上查之类的 缩小范围）

2.alias 别名

比如引入bootstrap 如果项目里直接import 会去找bootstrap.js（会让安装jquery才行） 所以引入别名的时候可以指定去找里面的某个文件

3.mainFields 入口 （默认是去读packjson里的main入口） 可以修改这边排优先级 优先到那个入口

4.extensions 读扩展名的优先级 引入东西的时候 如果不写扩展名 默认读js的 这边可以多加几个 js读不到的话就读css?json? 可以自定义

开发环境、生产环境配置

使用webpack.merge，两个配置文件

merge默认用的smart

webpack优化点:

1.module中的noParse 不去解析某个包中的依赖库

比如 noParse:/jquery/ 因为jq里面没有什么别的依赖 只要jq就行了 减少解析module使用的时间

2.IgnorePlugin 可以指定某个东西不打包进去 比如moment打包进来的时候 里面有个local的语言包 我们不需要那么多的语言包 所以可以打包时忽略掉这个文件夹 （如果要引入别的语言包可以在项目内单独import里面的某个语言包然后设置语言）

3.dll映射配置

4.happypack

5.自带的优化配置

  • tree-shaking 可以去除无用代码 要import场景下的 require不行 require下es6模块会把结果放在default上 （所以比如require a = … 然后a是个对象 有两个方法 但是a.sum这样是取不到的）

  • scope-hosting 作用域提升 自动省略了一些可以简化的代码

6.代码分割

splitchunks分割代码块 配置缓存组 把要分割的模块一个个定义出来

比如从全部里抽一下所有用过2次以上的模块 再抽一个第三方库（priority设置高一点 会先执行这个模块的抽离）

1
2
3
4
5
6
7
common:{
    …
},
vendor:{
    priority:1,
    test:/node_modules/
}

7.懒加载

使用es6草案中的import（）其实是jsonp动态加载文件

8.热更新

hot:true hotmodulereplacementplugin 热更新插件webpack的

Tapable

tapable是一个第三方模块

webpack本质上是一种事件流的机制，它的工作流程是讲各个插件串联起来，核心就是tapable，原理是依赖发布订阅模式。

可以在webpack的源码compile，编译里面看到，主要就是调用了tapable的一些钩子

同步钩子通过tap注册，call执行

异步钩子tapAsync注册，callAsync执行