webpack最详细的文章分享

webpack介绍

webpack官网

webpack概念：

• webpack是一个前端打包工具
• 用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源
• Vue前期 脚手架就是用 webpack制作（Vue开始推荐用vite构建工具（更快））、react脚手架、angular等现代框架脚手架都是依赖webpack
• 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack主要功能

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

webpack核心概念：

1. 入口 entry
入口起点(entry point)
项目运行的起点
告诉webpack从哪开始打包

2. 出口 output
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件

3. 模式 mode(3种）
development (开发环境)

• 不会对打包生成的文件进行代码压缩和性能优化、打包速度快，
• 适合在开发阶段使用

production (生产环境) 默认模式

• 会对打包生成的文件进行代码压缩和性能优化
• 打包速度很慢，仅适合在项目发布阶段使用

none

//入口、出口、模式
const path = require('path');

module.exports = {
    
    
	// 入口
	// entry:'./src/index.js',
	entry:{
    
    
		"vue":"./src/main.js",
		"base":"./src/index.js"
	},
 	// 输出
	output:{
    
    
		// 路径，__dirname 当前目录
		path:__dirname+"/dist",
		// 文件名称
		filename:'[name]-[hash:7].js'
	},
	mode: 'production',//mode模式:produce产品开发模式
};

4. 加载器 loader
webpack默认只能加载处理js文件
loaderi让webpack拥有处理其他文件的能力

5.插件 plugin
webpack运行生命周期过程中做一些其他任务(压缩,清理)

webpack配置：

默认webpack.configjs配置文件中

特殊标识：

[hash]把内容通过hash算法算出来的一串字符
[hash:7]取hash字符串前7个
[name]原文件名称
[ext]文件的后缀名

---

代码分隔:

代码分隔官网
在webpack.config.js配置文件中 配置代码分隔

//webpack.config.js文件中
optimization: {
    
    
    splitChunks: {
    
    
        chunks: "all", 
       // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}

---

设置目录别名

在webpack.config.js配置文件中 设置

resolve: {
    
    
//别名: @代表是src目录resolve: {
    
    
 //别名: @代表是src目录
  alias: {
    
    
  //将@ 设置为src的别名
'@': path.resolve(__dirname, './src'),
                }
        },

---

开发工具

开发工具官方文档参考
作用：错误与源代码有个一一对应关系

在webpack.config.js配置文件中 配置开发工具

devtool:"eval-cheap-source-map",

---

link与script

• <script defer src=""></script> 等待页面内容加载好再去加载js
• <link href="" rel=prefetch> 提前预加载css

---

按需导入js（结合webpack魔法注释）

1. 安装jQuery

npm i jquery -S

2. 在src/index.js 导入

2.1 直接导入js

import $ from 'jquery'
console.log($)

2.2 按需导入js（结合webpack魔法注释）

//魔法注释
//01 给当前的js 文件命名
/* webpackChunkName:"jquery" */  
//02 网络有空闲预加载js
 /* webpackPrefetch: true */
big.onclick = function() {
    
    
        import( /* webpackChunkName:"jquery" , webpackPrefetch: true */ "jquery").then(({
     
     
                default: $
        }) => {
    
    
               console.log($);
        })
}

---

webpack 多入口/多出口 操作（在webpack/config.js)

案例：index/main双入口/出口

//入口
entry: {
    
           
     "index": '@/index.js',
     "main": '@/main.js',
        }, 

//出口
plugins: [      
		// 实例化插件，指定template模板的位置
		new HtmlWebpackPlugin({
    
    
			template:'./public/index.html',//模板
			chunks:["index"],//入口
			filename:"index.html" //文件名
		}),
		new HtmlWebpackPlugin({
    
    
			template:'./public/main.html',//模板
			chunks:["main"],//入口
			filename:"main.html" //文件名
		}),
]

哈希命名

contenthash chunkshash hash

作用：
01 可以控制浏览器的缓存
当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
02 提高二次加载的速度（有效的控制缓存）

• contenthash
  内容发生变化contenthash值才发生变化
• chunkshash
  入口发生变化，当前的文件chunkhashhash会变化
• hash
  只要项目内容发送变化，hash就会变化

---

环境变量

配置:通过环境命令产品环境压缩代码，使生产环境不压缩代码，打开devtool

1. 安装

 npm i cross-env -D

2. package.json 传参

"build": "cross-env NODE_ENV=production webpack",
 "serve": "cross-env NODE_ENV=development webpack serve",

3. webpack.config.js使用

mode:process.env.NODE_ENV,
devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',

4. js文件中使用

var baseURL = "";
if(process.env.NODE_ENV=="production"){
    
    
        baseURL = "http://dida100.com";
}else{
    
    
        baseURL = "http://localhost"
}
console.log("当前环境：",process.env.NODE_ENV,baseURL);

如图所示

---

安装vue脚手架

1. 安装

npm i vue -S
npm i vue-loader -D (处理.vue)
npm i vue-template-compiler -D (编译vue目录)
npm i vue-hot-reload-api -D (热更新)
npm i vue-style-loader -D (处理vue 样式)

2.在webpack.config.js 导入/配置/使用

//导入
const {
    
    VueLoaderPlugin}  =  require("vue-loader")
//配置
{
    
    test:/\.vue$/,use:["vue-loader"]}
//使用
plugins:[new VueLoaderPlugin()]

3. 在js 使用
main.js

//在main.js
//创建
import {
    
     createApp } from 'vue';
// 导入App.vue
import App from './App.vue';
console.log(App);
// 创建App并挂载
createApp(App).mount("#app")

main.html

<div id="app"></div>

App.vue

<template >
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >

如下图

实现的页面效果

---

接下来是操作如何使用webpack’的

使用webpack操作

1.安装

1.1 创建项目/初始化项目/安装webpack脚手架

---

2. 运行webpack

2.1 创建dist/index.html文件 且 引入main.js(必须在body中引入）

2.2新建src/header.js || index.js

2.3 在scr/header.js 创建div标签且插入标签内容

2.4 在src/index.js 导入header.js 且追加到body中

2.5 在cmd到pack根目录 npx webpack就会此时dist文件夹出现mian.js

2.6 在浏览器运行即可

---

3.配置webpack.config.js

3.1在webpack.config.js定义入口/输出/开发模式

---

4. 安装plugin插件

4.1 html模板插件

html模板插件作用：生成htmI模板文件，自动把打包好的js插入到模板文件

4.1.1 安装 :

npm i html-webpack-plugin -D

4.1.2 创建public/index/js 文件

4.1.3 在webpack.config.js导入 且配置

//const导入
const HtmIWebpackPlugin = require("html-webpack-plugin'")
  plugins: [
        // 实例化插件 指定template模板的位置
        new HtmlWebpackPlugin({
    
    
          template:'./public/index.html' //自行创建
                })
        ],

4.2 自动清理dist目录插件

作用:打包前删除dist目录

4.2.1 安装

  npm i clean-webpack-plugin -D

4.2.2 webpack.config 导入 且配置

//导入
const {
    
     CleanWebpackPlugin} = require('clean-webpack-plugin')
//配置
plugins: [new CleanWebpackPlugin()]

4.3 css/js 优化插件

4.3.1 css优化

css优化官网参考
如下操作

4.3.1.1 安装

//安装插件
npm i  css-minimizer-webpack-plugin -D

4.3.1.2 配置中导入/使用

//在webpack.config.js配置文件中
//01导入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//02使用
optimization: {
    
    
    minimizer: [new CssMinimizerPlugin()],
        },

4.3.2 js优化插件

js插件官网
操作如下

4.3.2.1安装

//安装js压缩插件 
npm i terser-webpack-plugin -D

4.3.2.2 配置中导入/使用

//webpack.config.js文件中
//01 导入：
const TerserPlugin = require("terser-webpack-plugin");
//02 使用
optimization: {
    
    
    minimize: true, //默认是压缩
    minimizer: [new TerserPlugin()],//压缩器
        },

最终实现css/js 压缩与优化

---

5. loader 加载器

5.1 css-loader处理

作用：css-loader.处理.CSS文件style-loader把css加载到style标签内

5.1.1 安装

//安装样式  
npm i css-loader style-loader -D

5.1.2 在src/创建assets/index.css （进行编辑）

5.1.3 在src/index.js导入css

5.1.4 在webpack.config.js 配置样式

//配置
module: {
    
    
        rules: [{
    
    
        test: /\.css$/,
// 当文件test通过,使用如下插件
        use: ["style-loader", "css-loader"]
				}]
        },

5.2 处理文件（图片、文件）

作用:加载图片和文件

5.2.1 安装

//安装
npm i file-loader url-loader -D

5.2.2 在webpack.config.js配置

{
    
     
  test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/, 
  use: [{
    
    
  loader: "url-loader",
  options: {
    
    limit: 5000,name: 'images/[hash].[ext]'},
  }] 
  }

5.2.3 在src/index.js页面中导入且设置图片

页面效果

---

6. devserver 本地服务器开启

6.1安装

//安装本地服务器  
npm i webpack-dev-server -D

6.2 webpack.config.js 配置 定义服务器内容

end…