這次搞搞 提取公用模塊
但是這塊我也搞不太懂 就隨便寫寫
先整理下我們的 dist 文件夾, 目前我們所有的打包結(jié)果都平鋪在這個文件夾里不適合
修改 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
+ filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
+ name: 'resource/[name].[ext]'
}
}
]
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 8192,
+ name: 'resource/[name].[ext]'
+ }
+ }
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
+ new ExtractTextPlugin("css/[name].css")
]
};
分別解釋下
output 里的修改是指定了打包后生成的 app.js 分配到 dist 下面的 js 文件夾里
圖片處理那邊的 loader 加上了 name 屬性的那一句 是把打包后生成的圖片文件以自己打包前的文件名命名, 并且放在 dist/resource 文件夾下. 其中 [name] 就是打包前的文件名前綴, [ext] 就是打包前的文件名后綴
字體那邊的處理修改成了和圖片處理一樣的寫法, 沒啥好講的
最后 plugins 里對 css 文件的處理也是以打包前的文件名命名 然后丟進 dist/css 文件夾里面, 但是在這個例子的項目結(jié)構(gòu)下, ExtractTextPlugin 的 [name] 是有坑的, 不過我懶得解釋, 正常項目也不可能有這個問題
這樣改完以后 再打包出來的 dist 文件夾就干凈多了 我們再繼續(xù)開始提公用模塊
網(wǎng)上的教程會叫你用這個東西
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/common.js'
})
本來沒啥問題 但是你如果現(xiàn)在電腦右下角的日期和我寫這個教程的時間相差不太遠 也沒有在安裝 webpack 的時候指定版本號的話 你的版本肯定是 4.0 往上了
你再用上面的方法就會報錯
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
就只能聽它的 它讓我們用啥就用啥
optimization: {
splitChunks: {
chunks: "initial", // 必須三選一： "initial" | "all"(默認(rèn)就是all) | "async"
minSize: 0, // 最小尺寸相种，默認(rèn)0
minChunks: 1, // 最小 chunk ，默認(rèn)1
maxAsyncRequests: 1, // 最大異步請求數(shù)， 默認(rèn)1
maxInitialRequests : 1, // 最大初始化請求書寝并，默認(rèn)1
name: function(){}, // 名稱箫措，此選項可接收 function
cacheGroups:{ // 這里開始設(shè)置緩存的 chunks
priority: 0, // 緩存組優(yōu)先級
vendor: { // key 為entry中定義的 入口名稱
chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步)
test: /react|lodash/, // 正則規(guī)則驗證，如果符合就提取 chunk
name: "vendor", // 要緩存的 分隔出來的 chunk 名稱
minSize: 0,
minChunks: 1,
enforce: true,
maxAsyncRequests: 1, // 最大異步請求數(shù)衬潦， 默認(rèn)1
maxInitialRequests : 1, // 最大初始化請求書斤蔓，默認(rèn)1
reuseExistingChunk: true // 可設(shè)置是否重用該chunk（查看源碼沒有發(fā)現(xiàn)默認(rèn)值）
}
}
}
},
感興趣就先看這個網(wǎng)址 然后自己去扒文檔 http://ju.outofmemory.cn/entry/343762
當(dāng)然我們用不到上面這么多配置, 就隨便修改一下 webpack.config.js 文件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("css/[name].css")
],
+ optimization: {
+ splitChunks: {
+ chunks: "all",
+ name: 'common'
+ }
+ },
};
但是 optimization 我不懂, 所以不解釋了, 不然可能每一句都是錯的, 誤導(dǎo)別人不太好
打包之后會看到 dist 下面自動做了一些公共 chunks, 但是具體的實現(xiàn)我也不懂
optimization.splitChunks 自動分包的機制是這樣的
- 新代碼塊可以被共享引用，或者這些模塊都是來自 node_modules 文件夾里面
- 新代碼塊大于30kb (min + gziped 之前的體積)
- 按需加載的代碼塊镀岛，最大數(shù)量應(yīng)該小于或者等于5
- 初始加載的代碼塊弦牡，最大數(shù)量應(yīng)該小于或等于3
其它的我也講不清了 但是我們已經(jīng)稀里糊涂的解決了 提取公用模塊 的需求
接著是 處理全局問題(比如 jq 的全局變量)
