Webpack知识体系（上）

这是我参与第五届青训营 伴学笔记创作活动的第14天。

课程重点

什么是Webpack
Webpack基本使用
关键配置项介绍

什么是Webpack

前端资源由很多的资源构成手动管理这些资源有非常突出的问题，限制了页面的规模，影响其前端开发效率：

依赖手工，比如有50个js文件..操作，过程繁琐
当代码文件之间有依赖时，须严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难使用Less、Sass等预处理工具
JS、图片、CSS资源管理模型不一致所以，就出现了很多工程化工具：如gulp,webpack,vite等。

Webpack本质上是一种前端资源编译、打包工具：

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR+开发服务器
支持持续监听，持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap

Webpack基本使用

初始化package.jsonnpm init -y
安装npm i webpack webpack-cli -D
执行编译命令npx webpack 核心流程关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

流程类：作用域流程中某个or若干个环节，直接影响打包效果的配置项。
工具类：主流程之外，提供更多工程化能力的配置项

配置总览按使用频率：

entry/output;
module/plugins;
mode;
watch/devServer/devtool 下面就让我们开发使用webpack：在项目根目录下新建文件：webpack.config.js

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

打包css

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
        //loader的配置
        {
            test:/\.css$/,//只检测.css文件
            use:[
                //执行顺序，从右到左(从上到下)
                "style-loader",//将js中的css通过创建style标签添加html文件中生效
                "css-loader",//将css资源编译成commonjs的模块到js中
            ]
        }
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

接入Babel

presets 预设,简单理解：就是一组 Babel 插件, 扩展 Babel 功能

@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。

@babel/preset-react：一个用来编译 React jsx 语法的预设

@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

下载包npm i babel-loader @babel/core @babel/preset-env -D

定义 Babel 配置文件babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

配置webpack.config.js

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
        //loader的配置
        {
          test: /\.js$/,
          exclude: /node_modules/, // 排除node_modules代码不编译
          loader: "babel-loader",
        }, 
            ]
        }
    ],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

生成HTML

下载包npm i html-webpack-plugin -D
配置webpack.config.js

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器
  module: {
    rules: [
        //loader的配置
        {
            test:/\.css$/,//只检测.css文件
            use:[
                //执行顺序，从右到左(从上到下)
                "style-loader",//将js中的css通过创建style标签添加html文件中生效
                "css-loader",//将css资源编译成commonjs的模块到js中
            ]
        },
        {
          test: /\.js$/,
          exclude: /node_modules/, // 排除node_modules代码不编译
          loader: "babel-loader",
        },
    ],
  },
  // 插件
  plugins: [
    new htmlWebpackPlugin({
       // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    })
  ],
  // 模式
  mode: "development", // 开发模式
};

HMR（Hot Module Replacement --模块热替换）

开启HMR：webpack.config.js

module.exports = {
    //...
    devServer: {
        hot: true;
    }
 }

2.启动Webpack npx webpack serve Tree-Shaking（树摇，用于删除Dead Code）

Dead Code:代码没有用到，不可到达；代码的执行结果不会被用到；代码只读不写；模块导了，但未被其它模块使用。

开启tree-shaking

mode: "production",
optimization.usedExports: true

Webpack知识体系（上）| 青训营笔记

Webpack知识体系（上）

课程重点

什么是Webpack

Webpack基本使用