这次搞搞 提取公用模块
但是这块我也搞不太懂 就随便写写
先整理下我们的 dist 文件夹, 目前我们所有的打包结果都平铺在这个文件夹里不适合
修改 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 文件夹里面, 但是在这个例子的项目结构下, ExtractTextPlugin 的 [name] 是有坑的, 不过我懒得解释, 正常项目也不可能有这个问题
这样改完以后 再打包出来的 dist 文件夹就干净多了 我们再继续开始提公用模块
网上的教程会叫你用这个东西
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/common.js'
})
本来没啥问题 但是你如果现在电脑右下角的日期和我写这个教程的时间相差不太远 也没有在安装 webpack 的时候指定版本号的话 你的版本肯定是 4.0 往上了
你再用上面的方法就会报错
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
就只能听它的 它让我们用啥就用啥
optimization: {
splitChunks: {
chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async"
minSize: 0, // 最小尺寸，默认0
minChunks: 1, // 最小 chunk ，默认1
maxAsyncRequests: 1, // 最大异步请求数， 默认1
maxInitialRequests : 1, // 最大初始化请求书，默认1
name: function(){}, // 名称，此选项可接收 function
cacheGroups:{ // 这里开始设置缓存的 chunks
priority: 0, // 缓存组优先级
vendor: { // key 为entry中定义的 入口名称
chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
name: "vendor", // 要缓存的 分隔出来的 chunk 名称
minSize: 0,
minChunks: 1,
enforce: true,
maxAsyncRequests: 1, // 最大异步请求数， 默认1
maxInitialRequests : 1, // 最大初始化请求书，默认1
reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
}
}
}
},
感兴趣就先看这个网址 然后自己去扒文档 http://ju.outofmemory.cn/entry/343762
当然我们用不到上面这么多配置, 就随便修改一下 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 我不懂, 所以不解释了, 不然可能每一句都是错的, 误导别人不太好
打包之后会看到 dist 下面自动做了一些公共 chunks, 但是具体的实现我也不懂
optimization.splitChunks 自动分包的机制是这样的
- 新代码块可以被共享引用，或者这些模块都是来自 node_modules 文件夹里面
- 新代码块大于30kb (min + gziped 之前的体积)
- 按需加载的代码块，最大数量应该小于或者等于5
- 初始加载的代码块，最大数量应该小于或等于3
其它的我也讲不清了 但是我们已经稀里糊涂的解决了 提取公用模块 的需求
接着是 处理全局问题(比如 jq 的全局变量)
