webpack基础

概念

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

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

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

webpack安装

webpack核心概念

webpack.config.js文件中

1、入口（entry）

        项目运行的起点

        告诉webpack从哪开始打包

module.exports = {
    entry: './src/index.js', // 入口
}

2、出口（output）

        打包好放入哪

        filename 文件名

        path 路径

module.exports = {
    output: {
        filename: 'main-[hash].js', // 文件名
        path:__dirname+'/dist'  //文件夹  __dirname 当前目录
    },
}

3、模式（mode）

         产品模式 production

        开发模式 development

module.exports = {
    mode: 'production', // 模式
}

4、加载器（loader）

         webpack默认只能加载处理js文件

        loader让webpack拥有处理其他文件的能力

5、插件（plugin）

         webpack运行生命周期过程中做一些其他任务

devServer

安装:npm i webpack-dev-server -D

作用:开启一个本地服务器

module.exports = {
    devServer: {
        port: 8080, // 端口号
        hot: true, // 更新（文件保存，网页自动更新)
        host: 'localhost', // 域名
        open: true, // 是否自动打开浏览器
        proxy:{} // vue.config.js 代理一致
    }
}

在package.json文件中需加入

script:{"serve":"webpack serve"}

在终端中运行 npm run serve 命令，启动 webpack 进行项目的打包构建。

loader加载器

css处理

安装:npm i css-loader style-loader -D

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

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

处理文件

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

作用 加载图片和文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
                use: [{
                    loader: "url-loader", // 使用url加载器
                    options: { limit: 5000, name: 'images/[hash].[ext]' },
                    // 文件命名 images文件夹，hash值（计算出图片的名称） ext后缀名
                }]
            }
        ]
    },
}

处理cass

安装： npm i sass sass-loader -D

处理scss文件

.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目录（执行npm run build 需要清除上一次生成的内容）

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

抽出插件

安装： npm i mini-css-extract-plugin -D

作用：把css抽出为一个单独的文件

// 导入
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    // 实例化插件
    plugins: [
        new  MiniCssExtractPlugin()
    ],

    // 配置loader
    module: {
        rules: [
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
        ]
    }
}

优化

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

  等待页面内容加载好再去加载js

  提前预加载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：

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

// App.vue