1.为什么需要打包工具

我们在开发时一般使用框架，vue，react，es6模块化，scss等，这样的代码要想在浏览器运行必须转成浏览器识别的js，css才能运行，所以这时候就需要webpack了。除此之外，打包工具可以压缩代码，做兼容性处理，提升代码性能等。

2.打包工具分类

Grunt

Gulp

Webpack

vite

...........

本篇文章主要写Webpack

3.webpack的使用

分为开发模式和生产模式首先介绍webpack的简单使用

安装 webpack webpack-cli

css 复制代码

npm i webpack -D 
npm i webpack-cli -D

编译

css 复制代码

npx webpack ./main.js --mode=development

webpack就是将不能识别的语法编译成可以识别的语法，目前只能处理js资源。如何处理其他资源，需要进一步学习

webpack的5大核心概念

webpack基础配置

java 复制代码

const path = require("path"); //nodejs核心模块，专门处理路径问题
module.exports = {
  entry: "", //相对路径
  output: {
    path: , //绝对路径,开发模式无输出，所以写undefined
    
  },
  module: {},
  plugins: [],
  //开发服务器
  mode: "development",
};

处理样式资源

处理css资源

创建css文件夹，在文件夹下创建index.css,在main.js中引入import "./css/index.css"

css 复制代码

.box {
  display: flex;
  width: 1000px;
  height: 200px;
  background:red
}

css 复制代码

安装css-loader 
pnpm install --save-dev css-loader  
安装style-loader 
pnpm install style-loader

处理sass资源

创建sass文件夹，在文件夹下创建index.scss,在main.js中引入import "./sass/index.scss"

css 复制代码

.box4 {
  width: 20px;
  height: 20px;
  background: yellow;
}

css 复制代码

安装sass sass-loader
pnpm install sass sass-loader --save-dev

处理图片资源

webpack4处理图片资源通过file-loader和url-loader

webpack5已经将两个loader的功能内置到webpack里，只需要简单配置即可处理图片资源

修改输出文件目录

css 复制代码

output: {
    path: path.resolve(__dirname, "dist"), //绝对路径
    //入口文件打包输出的文件名
    filename: "static/js/main.js",
  },

yaml 复制代码

{
   test: /\.(png|jpe?g|gif|webp)$/,
   type: "asset",
   parser: {
     dataUrlCondition: {
     maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
     },
    },
    generator: {
     //输出文件名称,10代表hash值只取前10位
     filename: "static/images/[hash:10][ext][query]",
     },
 },

自动清空上次打包内容

webpack4通过插件来自动清空上次打包结果，webpack5通过clean:true来自动清空,

原理：在打包前将path目录清空再进行打包

arduino 复制代码

 output: {
    path: path.resolve(__dirname, "dist"), //绝对路径
    //入口文件打包输出的文件名
    filename: "static/js/main.js",
    clean:true //自动清空上次打包的结果
  },

处理字体图标问题

引入图标资源iconfont.css，引入字体资源fonts，配置webpack

bash 复制代码

{
        test: /\.(ttf|woff?2|)$/,
        type: "asset/resource",
        generator: {
          //输出名称,10代表hash值只取前10位
          filename: "static/media/[hash:10][ext][query]",
        },
      },

处理其他资源

如视频音频，excel，word

在处理字体字体图标资源的对象里再加一些资源

javascript 复制代码

test: /\.(ttf|woff?2|mp3|mp4)$/,

处理js资源

webpack对js的资源处理十分有限，只能编译es模块语法，针对js兼容性出来，利用babel

babel

介绍

js的编译器，将es6编写的代码转换为向后兼容的js语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

ini 复制代码

module.exports = {
  presets:[] //预设，babel插件。扩展babel功能
}

babel-loader

css 复制代码

安装
pnpm i babel-loader -D
pnpm i @babel/core -D
pnpm install -D babel-preset-env

处理js资源，通过babel-loader

javascript 复制代码

{
    test: /\.js$/,
    exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
    loader: "babel-loader",
  },

创建babel.config.js

ini 复制代码

module.exports = {
  // 智能预设：能够编译ES6语法
  presets: ["@babel/preset-env"],
};

处理html资源

css 复制代码

安装
npm install --save-dev html-webpack-plugin

在webpack.config.js引入

ini 复制代码

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

增加配置

arduino 复制代码

 plugins: [
    //以piblic/index.html文件创建新的html文件，
    //新的html文件的特点 1.结构和原本的一直 2.自动引入打包输出的资源
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public/index.html") }),
  ],

开发服务器和自动化

开发服务器不会输出资源，在内存中编译打包

vbscript 复制代码

安装webpack-dev-server
npm install -D webpack-dev-server

arduino 复制代码

配置
//开发服务器
  devServer:{
    host:"localhost", //启动服务器的域名
    port:"3000", //启动服务器端口号
    open:true, //是否自动打开浏览器
  },

启动指令变更npx webpack serve

4.生产模式相关配置

将生产模式的配置与开发模式的配置分开，创建文件夹config，将webpack.config.js移入到config，并改名webpack.dev.js，再建立webpack.prod.js，将webpack.dev.js的配置复制到webpack.prod.js

修改webpack.dev.js和webpack.prod.js中的绝对路径,并将mode改为production,去掉devServer

运行开发模式执行npx webpack serve --config ./config/webpack.dev.js

运行生产模式执行npx webpack --config ./config/webpack.prod.js

由于运行命令较长，故进行改造，修改package.json中的scripts

json 复制代码

 "scripts": {
    "start":"npm run dev",
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build":"webpack --config ./config/webpack.prod.js"
  },

此时运行程序时使用npm start即可

提取css成单独文件

单独打包生成css，防止闪屏,

安装npm install --save-dev mini-css-extract-plugin

在webpack.prod.js引入 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 修改配置，将style-loader改为MiniCssExtractPlugin.loader（提取css为单独文件）

css 复制代码

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

在plugins中调用

css 复制代码

  plugins: [
    new MiniCssExtractPlugin({filename:'static/css/main.css'})
  ],

样式兼容性处理

安装包npm install postcss postcss-loader postcss-preset-env -D

css 复制代码

增加配置，在css-loader后面，less-loader前面
{
    loader: "postcss-loader",
    options: {
     postcssOptions: {
      plugins: ["postcss-preset-env"], //解决大堆样式兼容性问题
     },
    },
},

go 复制代码

在package.json中增加
 "browserslist":["last 2 version","> 1%","not dead"]
 //所有浏览器最近的版本，覆盖99%浏览器以及不再使用的浏览器

封装样式loader函数

样式重复代码抽取并进行封装

javascript 复制代码

//获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"], //解决大堆事样式兼容性问题
        },
      },
    },
    pre,
  ].filter(Boolean); //若pre为undefined，直接过滤
}

css压缩

css 复制代码

npm install css-minimizer-webpack-plugin --save-dev

ini 复制代码

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

scss 复制代码

在plugins中使用
new CssMinimizerPlugin(),

html压缩

配置生产模式，html和js默认压缩，不需要额外进行配置

webpack5基础

1.为什么需要打包工具

2.打包工具分类

3.webpack的使用

webpack的5大核心概念

webpack基础配置

处理样式资源

处理css资源

处理sass资源

处理图片资源

修改输出文件目录

自动清空上次打包内容

处理字体图标问题

处理其他资源

处理js资源

babel

介绍

babel-loader

处理html资源

开发服务器和自动化

4.生产模式相关配置

提取css成单独文件

样式兼容性处理

封装样式loader函数

css压缩

html压缩