【Webpack 简介及五个核心概念】

妖狐艹你老母 2022-09-03 07:28 220阅读 0赞

**webpack系列文章：**

*  [【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！][Webpack _css_css_html_js_js_eslint_js_babel]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]

### 文章目录 ###

*  webpack 是什么
 *  webpack 五个核心概念
 *   *  1. Entry
     *  2. Output
     *  3. Loader
     *  4. Plugins
     *  5. Mode
 *  基本的webpack配置结构
 *  环境参数
 *  参考

# webpack 是什么 #

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

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

# webpack 五个核心概念 #

## 1. Entry ##

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

## 2. Output ##

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

## 3. Loader ##

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

## 4. Plugins ##

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

## 5. Mode ##

模式(Mode)指示 webpack 使用相应模式的配置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_35_color_FFFFFF_t_70_g_se_x_16]  
**一个小的梳理：**

1.  **webpack能处理js/json资源，不能处理css/img等其他资源**
2.  **能将 es6 的模块化语法转换成浏览器能识别的语法**
3.  **不能将 js 的 es6 基本语法转化为 es5 以下语法**
4.  **生产环境比开发环境多一个压缩js代码**

# 基本的webpack配置结构 #

`webpack.config.js`是webpack的配置文件，下面是一个打包样式资源的例子：

**注意：webpack的五个核心概念除了loader，其他四个都能在下面`webpack.config.js`导出对象的属性中体现，而loader配置的属性是：`module`。**

/* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */
    
    // resolve用来拼接绝对路径的方法
    const {  resolve } = require('path');
    
    module.exports = { 
      // webpack配置
      // 入口起点
      entry: './src/index.js',
      // 输出
      output: { 
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
      },
      // loader的配置
      module: { 
        rules: [
          // 详细loader配置
          // 不同文件必须配置不同loader处理
          { 
            // 匹配哪些文件
            test: /\.css$/,
            // 使用哪些loader进行处理
            use: [
              // use数组中loader执行顺序：从右到左，从下到上 依次执行
              // 创建style标签，将js中的样式资源插入进行，添加到head中生效
              'style-loader',
              // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
              'css-loader'
            ]
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              // 将less文件编译成css文件
              // 需要下载 less-loader和less
              'less-loader'
            ]
          }
        ]
      },
      // plugins的配置
      plugins: [
        // 详细plugins的配置
      ],
      // 模式
      mode: 'development', // 开发模式
      // mode: 'production'
    }

# 环境参数 #

看一下自己的环境

查看node版本

node -v

node版本为：v14.15.4

查看webpack版本

npm info webpack

webpack版本为：webpack@5.48.0

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

# 参考 #

*  https://www.bilibili.com/video/BV1e7411j7T5?p=3

[Webpack _css_css_html_js_js_eslint_js_babel]: https://blog.csdn.net/weixin_45844049/article/details/119828504
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20220829/eeb709d92fbf4b6fb57d14a82b277809.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_35_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/84266298176e48aeb943fe78ed6e089f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/7eb30afab4414a139b533843745054ca.png