背景

介绍

======================

安装

https://www.yuque.com/yejielin/mypn47/amd38l#Nh7DY

=======================

配置/设置

通过命令（局限）

通过scripts（局限）

通过配置文件（常用）

webpack内置了一些配置，无需我们自己手动配置。

如果我们希望自己手动配置一些东西，就要在项目下创建一个 webpack.config.js 文件，这个就是webpack的配置文件。

webpack每次打包时，都会检查项目下有没有这个文件，没有的话就用默认配置，有的话就用这里的配置。

下面是一个最基本的 webpack.config.js 的例子：

// ./src/webpack.config.js
// 这个是nodejs的路径api，这里用于帮助我们得到绝对路径
const path = require('path');
// 这里是导出一个对象，对象的属性就是配置
module.exports = {
  // 指定项目的js入口
  entry: "./src/main.js", 
  // 指定打包输出后到哪个文件夹，默认是项目下的dist文件夹
  output: {
    // 这里提供nodejs的path 路径API，获取当前文件 webpack.config.js 所在文件夹的绝对路径，然后指向build文件夹
    // 意思是输出到项目下的build文件夹，而不是默认的dist
    path: path.resolve(__dirname, "./build"), 
    // 指定输出后的文件名，默认就是bundle.js
    filename: "bundle.js"
  }
}

如果我不想用 webpack.config.js 这个名字，想换一个，可以在package.json里的scripts里面设置

其他配置可以查看官网：
https://webpack.docschina.org/configuration/

=======================

入口

什么是入口？

就是整个项目js的入口，webpack需要一个入口，才能识别到哪些文件、代码需要打包，哪些不需要。

依赖图

也就是所有和主入口有关系的文件，都会被打包。

怎么产生关系？通过主入口引入的文件（如import、require等），以及后面再引入到这个文件的文件，这些都是。

这是一种图结构，文件和文件可能相互依赖，同时也会识别哪些已经加载过，不会重复打包

=======================

加载器 Loader

webpack 目前来说只是帮我们打包js文件，其他文件如.css是不认识的。

而通过安装一些加载器Loader，可以帮助webpack认识这些文件，并且一起打包。

如何使用Loader？

1、安装对应的loader，比如要处理和识别css，就要安装css-loader

npm install loader名字 -D

2、给webpack添加对应loader的配置，告诉webpack怎么使用

// ./src/webpack.config.js
const path = require('path');
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  },
  // 配置loader模块
  module: {
    rules: [ // 规则属性
      {}, // loader对应的配置
      {}, 
      ......
      {}, 
    ]
  }
}

其他loader可以查看
https://www.yuque.com/yejielin/mypn47/whbit4#vsbnc

=======================

插件 Plugin

loader做不了的事情，webpack某个阶段想做的事情，都是通过插件完成（如自动删除文件）

loader只是处理webpack打包，而插件是在任何webpack生命周期都会起作用。

其他插件可以查看
https://www.yuque.com/yejielin/mypn47/zi1bzl#KXJzA

=======================

打包模式 Mode

背景

默认打包，是把所有js代码都拷贝到1个叫 bundle.js 的文件内，丑化和优化过的，只有1行。

但是缺点是，自己调试的时候，如果有个地方出错了，你很难找到到底是哪里出错了，因为都是只有1行，而且不会告诉你哪个位置（如下图）

开发模式（方便调试错误）

如果把mode设置成开发模式，那么打包出来的bundle.js 就是没有压缩和丑化的。

但结果还是看的有点吃力，这是因为devtool默认值是”eval”，把这个改为”source-map”就可以了。

会多一个 .js.map 的文件，这个是一个映射文件，意思是打包后的bundle.js 通过映射，映射到我们的源代码里面，这样就可以查看了。

其他选项

=======================

webpack中使用Vue

可查看 Vue - 在webpack里使用Vue3 和 Vue - 编写Template的3种方式(Vue3)

=======================

自动编译、本地开发服务器

https://www.yuque.com/yejielin/mypn47/krxlh0

=======================

开发环境配置、生产环境配置

背景

比如开发的时候，配置是开发环境的，打包上生产环境的时候，还是用这套配置就不合适，但是不可能打包的时候把代码改成生产的，然后又改回开发的。

方案一：两个配置文件

编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；

1、创建文件

2、修改脚本

package.json中：

3、安装webpack-merge插件

npm install webpack-merge -D

4、编写公共配置

把开发的配置和生成环境的配置抽出来放到对应的文件，这里只留下两边共有的

// webpack.comm.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require('vue-loader/dist/index');
module.exports = {
  target: "web",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../build"), // 路径要调整一下
    filename: "js/bundle.js",
  },
  resolve: {
    extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
    alias: {
      "@": path.resolve(__dirname, "../src"), // 路径要调整一下
      "js": path.resolve(__dirname, "../src/js") // 路径要调整一下
    }
  },
  module: {
    rules: [// 公共的规则],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ],
};

5、编写开发、生产配置文件

// webpack.dev.config.js
// 1、引入安装的webpack-merge
const { merge } = require('webpack-merge'); 
// 2、引入公共文件
const commonConfig = require('./webpack.comm.config');
// 3、用nodeJS的方式导出模块，merge函数就是合并两个配置的
module.exports = merge(commonConfig, {
  mode: "development",
  devtool: "source-map",
  devServer: {
    contentBase: "./public",
    hot: true,
    // host: "0.0.0.0",
    port: 7777,
    open: true,
    // compress: true,
    proxy: {
      "/api": {
        target: "http://localhost:8888",
        pathRewrite: {
          "^/api": ""
        },
        secure: false,
        changeOrigin: true
      }
    }
  },
})

//webpack.prod.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 1、引入安装的webpack-merge
const {merge} = require('webpack-merge');
// 2、引入公共文件
const commonConfig = require('./webpack.comm.config');
// 3、用nodeJS的方式导出模块，merge函数就是合并两个配置的
module.exports = merge(commonConfig, {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "./public",
          globOptions: {
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    }),
  ]
})

方案二：一个配置文件，设置参数

使用相同的一个入口配置文件，通过设置参数来区分它们；

===================

运行原理图