webpack基础

webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代[ JavaScript ](https://baike.baidu.com/item/ JavaScript /321142?fromModule=lemma_inlink)应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

• webpack是一个前端打包工具

• 用它来处理现代前端错综复杂的依赖关系（A插件需要B插件B插件有D插件 F插件需要A插件）生成浏览器可以识别静态资源

• Vue 前期脚手架就是用webpack制作
  （Vue 开始推荐vite构建工具（更快））
  react脚手架
  angular等现代框架脚手架都是依赖webpack

创建

• 创建项目
• npm init 初始化项目
• npm i webpack webpack-cli -D
• npx webpack 打包

webpack核心概念

入口entry

 entry: "./src/index.js",

出口output

output: {
    filename: "main.js",
    path: __dirname + "/dist",
  },

模式mode

mode: "production",产品模式
development开发模式

加载器loader

• npm i file-loader url-loader -D
• npm i css-loader style-loader -D

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

插件plugin

• 安装npm i html-webpack-plugin -D
• 作用：生成html模板文件，自动把打包好的js插入到模板文件
• 安装npm i clean-webpack-plugin -D
• 作用：打包前删除dist目录

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    new CleanWebpackPlugin(),
  ],

devServe

• 安装 npm i webpack-dev-serve -D

• 作用：开启一个本地服务器

  devServer: {
    port: 8080,
    hot: true,
    host: "localhost",
    open: true,
    proxy: {},
  },

修改package.json

 "scripts": {
    "build": "webpack",
    "serve": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

devServer

​ 安装：npm i webpack-dev-server -D
​ 作用：开启一个本地服务器

• open:true
  是否自动打开浏览器
• host：“localhost”
  域名
• port:8080
  端口号
• hot:true
  更新（文件保存，网页自动更新）
• package.json
  script：{“serve”:"webpack serve"}
  npm run serve 运行项目

loader

加载器

• css处理
  安装：npm i css-loader style-loader -D
  作用：css-loader处理.css文件 style-loader把css加载到style标签内
  module:{
  rule:[{test:/.css$/,use:["style-loader","css-loader"]}]
  }
• 处理文件
  （图片，文件）
  安装： npm i file-loader url-loader -D
  作用：加载图片和文件
  {test:/\.(png|jpg|jpeg|gif|svg)$/,use:[{loader:"file-loader",options:{limit:5000,name:"images/[hash].[ext]"}}]}
• 处理sass
  安装： npm i sass sass-loader -D
  处理scss文件
  {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}

plugin

插件
html模板插件
安装:npm i html-webpack-plugin -D
作用
作用：生成html模板文件，自动把打包好的js插入到模板文件
在webpack.config.js 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[
new HtmlWebpackPlugin({template:"./public/index.html"})
]
清理dist目录
安装：npm clean-webpack-plugin -D
作用：打包前删除 dist目录
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
plugins:[new CleanWebpackPlugin()]
抽出插件
安装： npm i mini-css-extract-plugin -D
作用：把css抽出为一个单独的文件
导入： const MiniCssExtractPlugin = require("mini-css-extract-plugin")
配置loader
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
实例化插件
new MiniCssExtractPlugin()

优化

• css 压缩
  安装：npm i css-minimizer-webpack-plugin -D
  导入：const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

• js的压缩
  安装：npm i terser-webpack-plugin -D
  导入：const TerserPlugin = require("terser-webpack-plugin");

• 实现压缩与优化

  	optimization: {
      minimize: true, //默认是压缩
      minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],//压缩器
  	},
  

• 代码分割

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

特殊标识

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

目录别名

resolve: {
 // 别名：@代表是 src目录
alias: {
     '@': path.resolve(__dirname, './src'),
 }
    },

开发工具

devtool:"eval-cheap-source-map",
作用，错误与源代码有个一一对应关系

link与script

<script defer src=""></script>

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

webpack中的魔法注释

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

哈希命名

1. 可以控制浏览器的缓存

当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
当文件名保持不变，浏览器二次请求会从缓存里面去请求内容

2. 提供二次加载的速度（有效的控制缓存）

   • contenthash

   内容发生变化 contenthash值才发送变化

   • chunkhash
     入口发生变化，当前的文件chunkhashhash会变化
   • hash
     只要项目内容发送变化，has h就会变化

环境变量

配置：通过环境命令  产品环境 压缩代码，是生产环境不压缩代码，打开devtool
项目开发中 ，产品环境 baseURL http://dida100.com:8888

生产环境 baseURL http://localhost:8080

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脚手架

不要vue脚手架如何搭建项目？

安装

• 处理.vue

  npm i vue -S
npm i vue-loader

• 编译vue目录
  vue-template-compiler

• 热更新
  vue-hot-reload-api

• 处理vue 样式
  vue-style-loader -D

配置

1. 导入
   const {VueLoaderPlugin} = require("vue-loader")

2. 配置
   {test:/\.vue$/,use:["vue-loader"]}

3. 插件
   plugins:[new VueLoaderPlugin()]

js

模板文件 public/main.html

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

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

	App.vue
<template >
	<div>
		<h1>你好Vue3</h1>		 
	</div>
</template >