webpack学习

什么是webpack

1. webpack是一个前端打包工具

2. 用来处理现代前端错综复杂的依赖关系，生成浏览器可以识别的静态资源。（解释一下什么叫依赖关系：就是A插件需要B插件，B插件有D插件， F插件又需要A插件）

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

webpack的安装

cd 到指定的的文件夹   md 创建文件夹

cd/ 进入根目录

md pack 创建pack文件夹

cd pack 进入文件夹

npm init -y 初始化项目

npm i webpack webpack-cli -D安装

webpack的核心概念

默认webpack.config.js配置文件中

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

2. 出口output
打包好放入哪
filename文件名
path路径

3. 模式mode
产品模式production
开发模式development

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

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

devServer

安装指令 npm i webpack-dev-serve -D
作用开启一个本地服务器
pen：true 是否打开浏览器
host：“loaclhost” 域名
port：8080 端口号
hot：true 更新（文件保存，网页自动更新）
package.json

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

  

需要在package.jsonzhong添加

"scripts": {
    "serve": "webpack serve",
}

 

loader加载器

作用 css处理 css-loader处理css文件 style-loader吧css加载到style标签内
安装指令 npm i css-loader style-loader -D

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

  

文件处理
安装指令 npm i file-loader url-loader -D
作用 加载图片和文件

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

plugin插件

html模板插件
安装指令 npm i html-webpack-plugin -D
作用 生成html模板文件 自动把打包好的js插件插入模板文件
在webpack.config.js 导入

const HtmlWebpackPlugin = require("html-webpack-plugin");


plugins: [
    //   实例化插件 指定tempplate模板的位置
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],

清理dist目录

安装 npm i clean-webpack-plugin -D
作用 ：打包前山删除dist目录

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins:[new CleanWebpackPlugin()]

导出css插件

把css导出为一个单独的文件

安装插件

npm i mini-css-extract-plugin -D

   // 导入
    const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    module.exports = {
        // 实例化插件
        plugins: [
            new  MiniCssExtractPlugin()
        ],
     
        // 配置loader
        module: {
            rules: [
                {test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
            ]
        }
    }

css优化（css压缩）

安装

npm i css-minimizer-webpack-plugin -D

  // 导入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

js优化（js压缩）

安装

npm i terser-webpack-plugin -D

 

   // 导入
    const TerserPlugin = require("terser-webpack-plugin");

实现压缩与优化

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

代码分割

当js比较小会多个合成1个，当js超过3m一个分割为多个

  

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

特殊标识

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

目录别名

 

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

开发工具（devtool）

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

作用：错误与源代码有个一 一对应关系

 link（defer ）与script（rel=prefetch）

<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  只要项目内容发送变化，hash就会变化

环境变量（传参）

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

项目开发中 ，产品环境 baseURL http://xxx.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使用

    module.exports = {
        ...
        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://xxx.com";
     
    }else{
            baseURL = "http://localhost"
     
    }
    console.log("当前环境：",process.env.NODE_ENV,baseURL);

vue脚手架

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

安装

    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 样式)

配置

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 >