webpack 基本概念

约定不等于承诺〃 2023-03-04 08:29 46阅读 0赞

### 文章目录 ###

*   *   *  一、什么是 webpack
         *  二、五个核心概念
         *   *  1. 入口（entry）
             *   *  单个入口语法：
                 *  对象语法：
                 *  分离 应用程序(app) 和 第三方库(vendor) 入口：
                 *  多页面应用程序：
             *  2. 出口（output）
             *   *  用法：
                 *  多个入口起点：
             *  3. loader
             *   *  示例：
                 *  使用 \`loader\`:
                 *   *  配置：\`module.rules \`允许你在 \`webpack \`配置中指定多个 \`loader\`。
             *  4. 插件（plugins）
             *  5. 模式（mode）

**  上次无意看到电脑上有个 webpack 的小视频，就学了学。虽然杂音很大，但总归让我对 `webpack`有了些简单的了解。**

**  想着还是先把 webpack 的基本概念搞明白点，所以第一篇博客就先总结一下概念吧。**

### 一、什么是 webpack ###

**  根据 webpack 中文网所说可知，webpack 本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。下面附上网图。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

### 二、五个核心概念 ###

#### 1. 入口（entry） ####

**  入口起点指示 `webpack` 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后， `webpack` 会找出有哪些模块和库是入口起点（直接和间接）依赖的。**

**  可以通过在 `webpack` 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为`./src`。**

##### 单个入口语法： #####

**  如下示例所示，定义 src 目录下的 `main.js` 为入口，故从该文件开始创建依赖图。**

module.exports = { 
        //入口
        entry:{ 
            main:"./src/main.js"
        }
    
    	//可简写为：
    	// entry:"./src/main.js" 
    }

##### 对象语法： #####

module.exports = { 
      entry: { 
        app: './src/app.js',
        vendors: './src/vendors.js'
      }
    };

##### 分离 应用程序(app) 和 第三方库(vendor) 入口： #####

module.exports = { 
      entry: { 
        app: './src/app.js',
        vendors: './src/vendors.js'
      }
    };

**   `webpack`从 `app.js` 和`vendors.js`开始创建依赖图，这些依赖图是彼此完全分离、互相独立的，这种方式比较常见于，只有一个入口起点（不包括 `vendor`）的`单页应用程序(single page application)`中。**

##### 多页面应用程序： #####

module.exports = { 
      entry: { 
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js',
        pageThree: './src/pageThree/index.js'
      }
    };

**  我们告诉 webpack 需要 3 个独立分离的依赖图。**

#### 2. 出口（output） ####

**  output 告诉 webpack 在哪里输出它所创建的 `bundles`，以及如何命名这些文件，默认值为 `./dist`。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。可以通过在 `webpack` 配置中配置 `output`属性，来配置这些处理过程。**

##### 用法： #####

**  一个应用程序可以有多个入口，但只能有一个出口。在 `webpack`中配置 `output`属性的最低要求是，将它的值设置为一个对象，包括以下两点：**

**  - `filename` 用于输出文件的文件名。**

**  - 目标输出目录 `path` 的绝对路径。**

const path = require('path');
    
    module.exports = { 
        //出口
        output:{ 
            filename:"bundle.js",
            path:path.resolve(__dirname, 'dist')
        }
    }

**  其中在代码最上面导入的 `path`模块是一个 `node.js`核心模块，用于操作文件路径。**

##### 多个入口起点： #####

**  如果配置创建了多个单独的 “`chunk`”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符来确保每个文件具有唯一的名称。**

{ 
      entry: { 
        app: './src/app.js',
        search: './src/search.js'
      },
      output: { 
        filename: '[name].js',
        path: __dirname + '/dist'
      }
    }

#### 3. loader ####

**  `loader`让`webpack`能够去处理那些非`JavaScript`文件(`webpack`自身只理解`JavaScript`)，可用于对模块的源代码进行转换。`loader`可以使你在 `import`或"加载"模块时预处理文件。因此，`loader` 类似于其他构建工具中“任务”，并提供了处理前端构建步骤的强大方法。`loader`可以将文件从不同的语言转换为 `JavaScript`，或将内联图像转换为`data URL`。`loader`也允许你直接在 `JavaScript`模块中`import CSS文件`。**

##### 示例： #####

**  例如，你可以使用 `loader`告诉 `webpack`加载 css文件，或者将`TypeScript`转为`JavaScript`。**

**  首先安装相对应的 `loader`：**

npm install --save-dev css-loader
    npm install --save-dev ts-loader

**  然后指示 `webpack`对每个`.css`使用`css-loader`，以及对所有 `.ts`文件使用`ts-loader`：**

module.exports = { 
      module: { 
        rules: [
          {  test: /\.css$/, use: 'css-loader' },
          {  test: /\.ts$/, use: 'ts-loader' }
        ]
      }
    };

##### 使用 `loader`: #####

**在应用程序中有三种使用 `loader`的方式：**

**- 配置（推荐）：在`webpack.config.js`文件中指定 `loader`。**

**- 内联：在每个 `import`语句中显式指定 `loader`。**

**- CLI：在 `shell`命令中指定它们。**

###### 配置：`module.rules`允许你在 `webpack`配置中指定多个 `loader`。 ######

module: { 
        rules: [
          { 
            //test，识别出那些文件会被转换
            //use，定义出再进行转换时，应该使用那些loader
            test: /\.css$/,
            use: [
              {  loader: 'style-loader' },
              { 
                loader: 'css-loader',
                options: { 
                  modules: true
                }
              }
            ]
          }
        ]
      }

#### 4. 插件（plugins） ####

**  插件是 `webpack` 的支柱功能，目的在于解决 `loader`无法实现的其他事。**

**  由于插件可以携带参数/选项，必须在 `webpack`配置中，向 `plugins`属性传入 `new`实例。**

**  使用一个插件，首先需要 `require`它，然后把它添加到 `plugins`数组中，使用`new`操作符创建一个插件实例。**

#### 5. 模式（mode） ####

**  提供 `mode`配置选项，告知 `webpack`使用相应模式的内置优化。**

**  通过 `development`或 `production`之中的一个来设置 `mode`参数。**

module.exports = { 
      mode: 'production'
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

**  内容来源 webpack 中文文档，大家可以去看 [webpack 中文文档][webpack]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20230208/4065d98c2d01433eb590b67d4cf25a26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20230208/e2c0780b11ec4b84ad1ce1c79672c8aa.png
[webpack]: https://www.webpackjs.com/concepts/