11-webpack5学习-抽离公共包

项目结构

webpackCommonPage
│  package-lock.json
│  package.json
│  webpack.config.js
└─src
		index.css
        index.js
        mine.js
        index.css

安装依赖

在webpackCommonPage目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader optimize-css-assets-webpack-plugin mini-css-extract-plugin vue jquery --save-dev

webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
	entry:{
		index:resolve(__dirname,"src/index.js"),
		mine:resolve(__dirname,"src/mine.js")
	},
	output:{
		path:resolve(__dirname,"dist"),
		filename:"[name].js"
	},
	module:{
		rules:[
			{
				test:/\.css$/i,
				use:[MiniCssExtractPlugin.loader,'css-loader']
			}
		]
	},
	optimization:{
		splitChuncks:{
			chunks:"all"
		}
	},
	plugins:[
		new HtmlWebpackPlugin(),
		new MiniCssExtractPlugin({filename:"[name].css"}),
		new OptimizeCssAssetsWebpackPlugin()
	]
}

index.js,mine.js文件

import vue from 'vue'
import jquery from 'jquery'
// 其他逻辑代码

本地打包命令

• 方式一：在webpackCommonPage目录下运行

webpack --config ./webpack.config.js

• 方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js",
	}
	...
}

修改保存后，在webpackCommonPage目录下运行如下命令：

npm run build

打包后的目录

webpackCssCompress
│  package-lock.json
│  package.json
│  webpack.config.js
├─dist
│      index.build.js
│      index.html
│      index.css
│      mine.html
│      mine.build.js
│      vendors-node_modules__core-js_3_21_0_core-js_modules_es_object_to-string_js-node_modules__cor-0ff0de.bundle
│     vendors-node_modules__jquery_3_6_0_jquery_dist_jquery_js.bundle
└─src
		index.css
        index.js
        mine.js