//build目录下，webpack.common.js文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
main: "./src/index.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader'
}
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new CleanWebpackPlugin()
],
optimization: {
splitChunks: {
chunks: 'all',
},
},
output: {
filename: '[name].js' , //入口文件打包生成的文件名字
chunkFilename:'[name].chunk.js',//间接引入的模块打包的时候，
//生成的文件的名字就会走chunkFilename的配置内容
path:path.resolve(__dirname,'dist'),
}
}
filename和chunkFilename有什么样的区别呢？
在src目录下index.js文件中，
异步的引入lodash这样的库，
创建一个DOM,挂载到页面上，
打包，
配置chunkFilename后，打包会是设么样子的？
2.png
3.png
1.png
entry: {
main: "./src/index.js"
},
index.js是入口文件在entry里面，
入口文件打包生成的这种js文件，都会走filename这个配置项，
所以index.js在做打包的时候，它前面的值是main:,
它打包生成的文件就是main.js
main.js里面会引入lodash,
lodash又被单独打包生成了一个文件vendors~lodash.chunk.js,
打包生成文件在整个代码运行的过程中，
main.js先执行，然后异步的去加载这个vendors~lodash.chunk.js,
这个vendors~lodash.chunk.js并不是一个入口的js问价，
它是一个被main.js异步加载的间接js文件，
如果你打包生成这样一个间接的js文件，
它就会走chunkFilename这个配置项，
4.png
或者查看dist目录下index.html文件
5.png
可以看到里面只引入了main.js，
所以main.js其实走的是入口文件，
所以走的就是filename这样一个配置参数
而vendors~lodash.chunk.js在index.html中找不到，
它是怎么载入的呢？
它是通过mian.js的代码里面再去引入lodash.js,
是间接引入的，
间接引入的模块打包的时候，
生成的文件的名字就会走chunkFilename的配置内容
