webpack教程

概念：

webpack是一个前端打包工具

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

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

webpack安装与webpack脚手架安装步骤

 文件 → 选择打开文件目录 → 选择创建的文件名（我的文件名是pack）打开添加。

 创建一个配置文件webpack.config.js（高度依赖配置文件）

        入口、出口、模式的设置

在package.json文件里设置 

 

 这样就可以在cmd里就可以写 npm run serve打包命令了

 自定义拷贝到dist目录，插入打包好的js文件

先安装npm i html-webpack-plugin - D

 在webpack.config.js里设置

        先导入html-webpack-plugin插件处理html目标

const HtmlwebpackPlugin = require(' html-webpack-plugin') 

 然后实例化插件，指定模板位置

然后就可以打包运行了 

 处理css文件，把加载好的css放入style标签：npm i css-loader style-loader -D

 在配置文件配置

 然后打包运行就可以看到样式的更改了

devServer本地服务器

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

 然后配置完之后打包运行

 图片与文件处理 

安装图片处理插件：npm i file-loader url-loader -D

 

 直接执行webpack，不执行服务器

 运行npm run build

字体图标 打包

先导入iconfont.css

在导入图标

清理dist文件目录   ：npm i clean-webpack-plugin -D

作用：执行npm run build 需要清理上次的生成的内容

 plugin插件中的抽出插件： 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

哈希命名

• 可以控制浏览器的缓存，
  • 当文件发生变化时候，hash就变化，文件名也就变化，浏览器就不缓存
  • 当文件名保持不变，浏览器二次请求会从缓存里面去请求内容
• 提供二次加载的速度（有效的控制缓存）
• contenthash：内容发生变化 contenthash值才发送变化
• chunkhash：入口发生变化，当前的文件chunkhashhash会变化
• hash：只要项目内容发送变化，hash就会变化

环境变量 

• 配置：通过环境命令  产品环境 压缩代码，是生产环境不压缩代码，打开devtool
• 项目开发中
  • 产品环境 baseURL http://dida100.com:8888
  •  生产环境 baseURL   http://localhost:8080
• 先安装：npm i cross-env -D
• package.json 传参

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

• webpack.config.js使用

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

• 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搭建项目

• 安装
  • npm i vue -S

  • 处理.vue：npm i vue-loader -D

    编译vue目录：npm i vue-template-compiler -D

    热更新：npm i vue-hot-reload-api -D

    处理vue 样式：npm i vue-style-loader -D

• 配置 
  • 01 导入：const {VueLoaderPlugin}  =  require("vue-loader")
  • 02 配置：{test:/\.vue$/,use:["vue-loader"]}
  • 03 插件：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 >

 webpack核心概念 

入口：entry

 项目运行的起点；告诉webpack从哪开始打包

出口：output

打包好放入哪；filename 文件名；path 路径

模式：mode

产品模式：production

开发模式：development

 loader：加载器

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

插件：plugin

webpack运行生命周期过程中做一些其他任务（压缩，清理）