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