webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代[ JavaScript ](https://baike.baidu.com/item/ JavaScript /321142?fromModule=lemma_inlink)应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

• webpack是一个前端打包工具

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

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

创建

• 创建项目
• npm init 初始化项目
• npm i webpack webpack-cli -D
• npx webpack 打包

webpack核心概念

入口entry

 entry: "./src/index.js",

出口output

output: {
    filename: "main.js",
    path: __dirname + "/dist",
  },

模式mode

mode: "production",产品模式
development开发模式

加载器loader

• npm i file-loader url-loader -D
• npm i css-loader style-loader -D

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

插件plugin

• 安装npm i html-webpack-plugin -D
• 作用：生成html模板文件，自动把打包好的js插入到模板文件
• 安装npm i clean-webpack-plugin -D
• 作用：打包前删除dist目录

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    new CleanWebpackPlugin(),
  ],

devServe

• 安装 npm i webpack-dev-serve -D

• 作用：开启一个本地服务器

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

修改package.json

 "scripts": {
    "build": "webpack",
    "serve": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },