webpack 总结

如何编写一个loader ,

loader 是链式调用的，从右往左调用，后写的先调用，调用时传入源码，返回源码的形式

如何编写一个 plugin plugin 的原理是监听webpack 各个生命周期的构子函数执行一些操作。

详细文档如下：

https://www.webpackjs.com/contribute/

babel-loader 一定要写 include 只include 需要转换的源文件即可，如果不写include 在打包过程中会将一些其他模块一起 转换，导致模块报错，常见的就是_webpack_require is not function 

webpack 有一个 require.ensure 和import(),require.ensure 动态引入的文件会生成一个文件

而import 会生成多个，配置lazy-once 只会生成一个

import() 在  extract-text-webpack-plugin

webpack4 + babel-loader7 +import() 动态路径js+  extract-text-webpack-plugin 会导致 提取的css中含有 js,使用mini-css-extract-plugin 可以解决该问题

问题1：webpack不借用 babel 就可以转换 import 吗？？？？？？？？？？

 问题2 webpack4  import()动态导入js，使用babel-loader后动态的js，会合并成一个chunk

webpack-dev-server 和webpack 有兼容问题，如果能打包成功，但是 打包后运行报 找不到入口文件 引入的模块，那就是webpack-dev-server 和webpack有版本兼容问题,

如果报Cannot find module 'webpack-cli/bin/config-yargs'  看报错的位置，去看一看代码，例如是webpack-dev-server报的，去看代码发现是引用路径不对，那就要升级webpack-dev-serrver

package-lock.json 和package.json 版本号会以package-lock.json的为准，必须要有package.jons才能进行 npm install  ,npm先找到package.json 中的包，然后通过package-lock.json锁定版本，最后下载完后，刷新package-locl.json

 

直接使用webpack 命令行可以解析import()语法，但是用webpack api却不行

  Invalid CSS after "...load the styles" 是重复添加了cssloader

当发现两个项目page.json完全相同一个可以运行另一个却不行时，看看page-lock.json是否一样

 

## webpack DllPlugin
webpack.DllPlugin 使用这个插件后，会生成一个mainifest.json文件，记录了打包的所有模块id，这个json是给 webpack.DllReferencePlugin使用的，DllReferencePlugin中识别mainifest的所有模块后，在发现加载这些模块的时候不会去编译这些模块，会直接从mainfest.json 中记录的变量中取

实际上Dellplugin 生成的js会赋给output.library指定的全局变量，然后DellReferencePlugin 中打包出来的文件会直接引用这个全局变量。

DellPlugin 打包出来的js要自己手动引入到模板html中

DllReferencePlugin 可以配置多个

DellPlugin 不要和 splicChunk一起使用，使用后发现生成的mainifest.json有问题，是由于默认splitChunk 打包出来的commonchunk 名字中含有~导致的

 

ExtractTextPlugin 可以把所有的css 合并成一个文件，new ExtractTextPlugin("styles.css")
webpack 可以使用 webpack().run 手动编译js，
web-dev-server 实际上就是express+dev-server-middleware
webpack 在 4.0以后将webpack的指令一到了webpack-cli,也就是说在命令行中使用 wepack 需要安装webpack-cli，否则需要使用 node.js run api进行调用

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

vue 函数组件 是一个无状态的组件内部无this，无data,所有数据依赖于外部传入

webpack devser.publicPath 指的是 保存在内存中bound 的访问路径，一定是以/开头和结尾的
如果publicPath 是/src/ 则访问路径要变为 http://host:port/src/
webpack devser.contentBase 指的是在publicPath 中找不到时，在去contentBase 中寻找
例如：访问一个资源路径为: http://host:port/src/xx.js,如果在publicPath 保存的内存中没有
就会去 webpack devser.contentBase +/src/xx.js 中查找

webpack.DefinePlugin 是用来定义变量打包文件中的变量的，将打包文件中的字符串替换成指定的值
例如:new webpack.DefinedPlugin({TEST："aaa"}),在被打包的文件中，所有的TEST都会被替换成aaa

规则如下:
如果这个值是一个字符串，它会被当作一个代码片段来使用。 会替换成字符串的值，如 TEST都会被替换成aaa
如果这个值不是字符串，它会被转化为字符串(包括函数)。若果是个函数，会被替换成函数的定义
如果这个值是一个对象，它所有的 key 会被同样的方式定义。
如果是AA:{a:"cc"}, AA会被替换成 Object({a:cc}),AA.a 会被替换成 cc

如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。 如果你定义了一个TEST 在代码中写了typeof TEST 会固定被转换成 typeof 11,如果你写了
new webpack.DefinePlugin("typeof TEST","xxx"),会被转换成 typeof TEST(不是太懂)

externals:{
'jquery':"$"
}
jquery 是模块的名称，$是你在import时的别名，如： import $ from "jquery" ,如果你在项目中是直接写的 import "jquery"
可以直接配成 externals:["jquery"]

terser 一个新的js压缩工具，是重unglify-js 的分支，因为unligy-js不支持es6且不维护了

splitchunkPlugin