webpack打包

什么是webpack

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什要使用webpack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器…

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

webpack的安装

win+r 打开控制窗口，输入cmd命令，cd到对应文件夹，完成后初始化项目 npm init -y，接着开始执行 npm i webpack webpack-cli -D 命令，安装相应的包。

安装完成后，在源文件中创建webpack的配置文件，并命名为 webpack.config.js(此文件存在于全局中  配置命令写在 module.exports = {})，webpack的配置基本分为六步，如下图所示（基本配与包安装命令也展示出来）

 

webpack目录

webpack配置文件代码

// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入css抽出压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
// 导入path
const path = require('path');
// 导入拷贝插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 导入清空插件
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin');
// 导入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
		// 入口
		entry: {
			vue: './src/main.js',
			base: './src/index.js'
		},
		// 出口
		output: {
			// 文件名
			filename: "main[contenthash:7].js",
			// 文件夹__dirname 当前目录
			path: __dirname + '/dist'
		},
		plugins: [
			// 实例化vue插件
			new VueLoaderPlugin(),
			// 清空
			new CleanWebpackPlugin(),
			new HtmlWebpackPlugin({
				// 指定模板文件
				filename: 'index.html',
				template: './public/index.html',
				chunks: ['vue'], //指定vue入口打包进来
			}),
			new HtmlWebpackPlugin({
					filename: 'base.html',
					template: './public/base.html',
					chunks:['base'], //指定base入口打包
				}),
				new MiniCssExtractPlugin({
					filename: "style-[contenthash:7].css"
				}),
				new CopyWebpackPlugin( // 设置静态目录（拷贝文件到另外一个文件夹）
					{
						patterns: [
							// { from: __dirname+'/public', to: __dirname+'/dist' },
							//from 从， to 到 __dirname 当前目录
							{
								from: __dirname + '/src/static',
								to: __dirname + '/dist/static'
							},
						],

					}
				),
			],
			module: {
				rules: [{ //vue 解析
						test: /\.vue$/,
						loader: 'vue-loader',
						options: {
							loaders: { //开发环境使用style-loader打包
								css: ['style-loader', 'css-loader'],
								less: ['style-loader', 'css-loader', 'less-loader']
							}
						}
					},
					// loader 是有顺序的，从右到左
					{
						test: /\.css$/,
						use: [ /*'style-loader'*/ MiniCssExtractPlugin.loader, "css-loader"]
					},
					{
						test: /\.less$/,
						use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
					},
					{
						test: /\.(jpg|jpeg|png|gif|webp|ico)$/,
						use: [{
							loader: 'url-loader',
							options: {
								limit: 10000,
								name: 'images/[name].[ext]'
							}
						}]
					}

				]
			},
			optimization: {
				// realContentHash: true
				minimizer: [
					new CssMinimizerPlugin(),
					new TerserWebpackPlugin(),
				]
			},
			resolve: {
				alias: {
					'@': path.resolve(__dirname, './src'), //设置@为src目录的别名
				}
			},
			// devtool:"source-map",
			mode: process.env.NODE_ENV, //产品模式| development
			devServer: {
				open: true, //打开浏览器
				host: "localhost", //本地域名
				port: 8080, //端口号
				hot: true //热更新
			}
		}

 webpack的优化