用webpack的dll外掛程式抽離第三方庫

在build下新建乙個webpack.dll.conf.js

const path =

require
('path'
)const webpack =
require
('webpack'
)const assetsplugin =
require
('assets-webpack-plugin'
)const cleanwebpackplugin =
require
('clean-webpack-plugin'
)const pkgjson =
require
('../package.json'
)let pkgdepends = object.
keys
(pkgjson.dependencies)||[
]let vendorlibs = pkgdepends.length >
0? pkgdepends.
filter
(item =>
['element-ui'].
indexof
(item)
===-1)
:;module.exports =
,  output:
,  plugins:
[// 這個外掛程式刪除舊的static/js/dll.vendor.*.js檔案
newcleanwebpackplugin([
'static/js/dll.vendor.*.js'],
),newwebpack.dllplugin()
,// 生成乙個bundle-config.json儲存著dll.vondor.[hash].js的值
newassetsplugin()
]}

new

webpack.dllreferenceplugin
()

dll:

(function()
` // 這裡static前一定要加'/'})
()

webpack的小外掛程式

1.clean webpack plugin 由於每次打包的時候有可能檔名稱不一樣，打包後的檔案就疊加到dist目錄下了，clean webpack plugin作用就是在每次打包之前，先把dist目錄刪掉，建立最新的目錄，避免不需要的檔案還留在dist目錄下。安裝 npm install clea...

webpack4 單獨抽離打包 css 的新實現

前言之前我們使用的打包 css 無非兩種方式 將 css 打包進 入口 js 檔案中 使用第三方外掛程式 extract text webpack plugin 實現 注意，該外掛程式在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug file loader我先給個 file ...

webpack4 單獨抽離打包 css 的新實現

前言之前我們使用的打包 css 無非兩種方式 將 css 打包進 入口 js 檔案中 使用第三方外掛程式 extract text webpack plugin 實現 注意，該外掛程式在 webpack4 中已經不推薦使用，而且會出現各種莫名其妙的 bug 正是基於對以上兩種方式缺點的思考，結合我的...