【Webpack】Webpack基础入门

红太狼 2023-02-17 11:13 192阅读 0赞

### 目录 ###

*   *   *  1. 模块化相关概念
         *   *  1.1 模块化的概念
             *  1.2 模块化规范
             *  1.3 ES6 模块化
         *  2. Webpack是什么？
         *   *  2.1 工程化概念
             *  2.2 Webpack的概念
         *  3. Webpack的基本使用
         *   *  3.1 安装和配置Webpack
             *  3.2 Webpack配置打包的入口与出口
             *  3.3 配置Webpack的自动打包功能
             *  3.4 配置生成预览页面
         *  4. Webpack中的加载器
         *   *  4.1 打包CSS文件
             *  4.2 打包less文件
             *  4.3 打包scss文件
             *  4.4 添加CSS的兼容前缀
             *  4.5 打包样式中的图片和字体文件
             *  4.6 打包JS文件中的高级语法

前言：本文是学习Webpack的一篇笔记。

### 1. 模块化相关概念 ###

#### 1.1 模块化的概念 ####

webpack是一个**模块化构建工具**，所谓的模块化，指的是解决一个复杂的问题时，自顶向下逐层把系统划分为若干模块的过程，有多种属性，分别反映其内部特性。

我们首先来了解一下模块化的**概念**，模块化就是把单独的一个功能封装到一个模块中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

**作用：** 模块化开发方便了代码的重用，从而提升了开发的效率，并且便于后期的维护。

#### 1.2 模块化规范 ####

前端的模块化一般是指JavaScript的模块，模块化之后的代码考虑更多的是：**代码使用**和**维护成本**的问题，所以有了很多模块化的规范：`CommonJS`、`AMD`和`ES6 Module`规范等，下面来逐个介绍：

（1）CommonJS：是Node.js广泛使用的一套模块化规范，是一种同步加载模块依赖的方式：

*  `require`：引入一个模块
 *  `exports`：导出模块内容
 *  `module`：模块本身

（2）AMD：是JS模块加载库RequireJS提出并且完善的一套模块化规范，AMD是一种异步加载模块依赖的方式：

*  `id`：模块的id
 *  `dependencies`：模块依赖
 *  `factory`：模块的工厂函数，即模块的初始化操作函数
 *  `require`：引入模块

（3）ES6 Module：ES6推出的一套模块化规范，每个js文件都是一个独立的模块：

*  `import`：导入模块成员
 *  `export`：暴露模块成员

#### 1.3 ES6 模块化 ####

由于兼容性问题，Node.js通过`babel`体验ES6模块化，具体步骤如下：

*  `npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node`
 *  `npm install --save @babel/polyfill`
 *  项目根目录创建配置文件： `babel.config.js`
 *  在`babel.config.js` 文件输入如下的代码
 *  通过 `npx babel-node index.js` 执行代码

// 语法转化数组
     const presets = [
       ["@babel/env", { 
         targets: { 
           edge: "17",
           firefox: "60",
           chrome: "67",
           safari: "11.1"
        }
      }]
    ];
     module.exports = {  presets };

默认导出语法：`export default 导出的成员`  
默认导入语法： `import 接收名称 from '模块标识符'`

主要注意的是，在每个模块中，只允许使用一次`export default`进行导出操作。

// demo1.js
    let a = 1
    let b =2
    function fn() { }
    export default { 
      a,
      fn
    }
    
    // demo2.js
    import demo1 from './demo1'
    console.log(demo1) // {a:1, fn:[Function: fn]}

还可以按需导入和按需导出，对于上面的代码：

// demo1.js
    let a = 1
    let b =2
    function fn() { }
    export default { 
      a,
      fn
    }
    export c = 3
    
    // demo2.js
    import demo1, { c} from './demo1'
    console.log(demo1) // {a:1, fn:[Function: fn]}
    comsole.log(c) // 3

在一个模块中，按需导出可以使用多次。

有时我们只想得到某个模块的代码，并不需要接受它的成员，就可以直接导入模块，语法：`import 模块路径`

### 2. Webpack是什么？ ###

#### 2.1 工程化概念 ####

前端工程化的早期，是以Gulp、Grunt等构建工具为主的阶段，这个阶段解决的是重复任务的问题，他们将某些功能拆解成固定步骤的任务，然后编写工具来解决。

而现阶段的Webpack则更像是从一套解决JavaScript模块化依赖打包开始，利用强大的插件机制，逐渐解决前端资源依赖管理问题，依附社区力量逐渐进化成一套前端工程化解决方案。  
![在这里插入图片描述][20200614104121822.png]

#### 2.2 Webpack的概念 ####

本质上，Webpack是一个现代的JavaScript应用程序的**静态模块打包器**，在Webpack处理应用程序时，它会在内部创建一个依赖图，用于映射到项目需要的模块，然后将所有的这些依赖生成一个或多个`bunble`。

Webpack可以做到**按需加载**，这是其他构建工具做不到的。它跟其他构建工具本质上的不同之处在于：**Webpack是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。** 在这三个过程中，可以针对性的做一些结局方案，以此来达到按需加载的目的。

除此之外，Webpack还可以解决传统构建工具能解决的问题：

*  **模块化打包**：JavaScript模块、CSS模块等
 *  **语法糖转换**：如ES6转为ES5、TypeScript等
 *  **预处理编译**：如Less、Sass（Scss）等
 *  **项目优化**：如压缩、CDN等
 *  **流程对接**：如测试流程、语法检测等
 *  **解决方案封装**：通过强大的Loader和插件机制，可以按成解决方案的封装，如PWA等

### 3. Webpack的基本使用 ###

#### 3.1 安装和配置Webpack ####

安装及配置Webpack需要执行以下步骤

*  运行 `npm install webpack webpack-cli –D` 命令，安装 webpack 相关的包
 *  在项目根目录中，创建名为 `webpack.config.js` 的 webpack 配置文件
 *  在 webpack 的配置文件中，初始化如下基本配置：

module.exports = { 
     mode: 'development' // mode 用来指定构建模式，这里是开发模式，不会对代码进行压缩和混淆
    }

*  在 `package.json` 配置文件中的 `scripts` 节点下，新增 `dev` 脚本如下：

"scripts": { 
    "dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行
    }

*  在终端中运行 `npm run dev` 命令，启动 webpack 进行项目打包。

#### 3.2 Webpack配置打包的入口与出口 ####

在webpack 的 4.x 版本中默认约定：

*  打包的入口文件为 `src -> index.js`
 *  打包的输出文件为 `dist -> main.js`

我们可以在 `webpack.config.js`配置文件中修改打包的入口与出口，需要添加以下配置信息：

const path = require('path') // 导入 node.js 中专门操作路径的模块
    module.exports = { 
       entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
       output: { 
          path: path.join(__dirname, './dist'), // 输出文件的存放路径
          filename: 'bundle.js' // 输出文件的名称
       } 
    }

#### 3.3 配置Webpack的自动打包功能 ####

我们在每次修改完之后，还需要重新执行打包的过程，这就很麻烦。所以引入自动打包功能，只要保存修改的代码，就可以进行自动打包。

配置自动打包功能需要执行以下步骤：

*  运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具
 *  修改 package.json -> scripts 中的 dev 命令如下：

"scripts": { 
     "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
    }

*  将 `src -> index.html` 中，`script` 脚本的引用路径，修改为 `"/buldle.js“`（因为上面修改了出口路径）
 *  运行 `npm run dev` 命令，重新进行打包
 *  在浏览器中访问 `http://localhost:8080` 地址，查看自动打包效果

需要注意：

*  webpack-dev-server 会启动一个事实打包的HTTP服务器
 *  webpack-dev-server 打包生成的输出文件，默认放在项目的根目录中，看不见

**自动打包的相关参数：**

// package.json中的配置
     // --open 打包完成后自动打开浏览器页面
     // --host 配置 IP 地址
     // --port 配置端口
     "scripts": { 
     "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
     }

#### 3.4 配置生成预览页面 ####

当自动打包完成后，我们打开`http://localhost:8080` 地址，看到的是一些文件路径，还需要点击src路径才能查看页面的预览，这时我们可以配置`html-webpack-plugin` 生成预览页面，它的原理就是将src中的源文件复制到根目录中，这样打开网页就可以直接得看到文件的预览效果了。

下面就来配置`html-webpack-plugin` 生成预览页面：

*  运行 `npm install html-webpack-plugin –D` 命令，安装生成预览页面的插件
 *  修改 `webpack.config.js` 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const htmlPlugin = new HtmlWebpackPlugin({   // 创建插件的实例对象
        template: './src/index.html', // 指定要用到的模板文件
        filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
    })

*  修改 `webpack.config.js` 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = { 
        plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
    }

### 4. Webpack中的加载器 ###

在开发过程中，Webpack只能打包以后缀名为`.js`的模块，其他模块默认就无法处理了，需要使用loader加载器才能进行正常的打包操作。

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

*  `less-loader` 可以打包处理 `.less` 相关的文件
 *  `sass-loader` 可以打包处理 `.scss` 相关的文件
 *  `url-loader` 可以打包处理 css 中与 url 路径相关的文件

loader的调用过程：  
![在这里插入图片描述][20200623002020525.png]  
下面就开介绍一下常用的loader加载器。

#### 4.1 打包CSS文件 ####

*  运行 `npm i style-loader css-loader -D` 命令，安装处理 css 文件的 loader
 *  在 `webpack.config.js` 的 `module -> rules` 数组中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
     module: { 
         rules: [
             {  test: /\.css$/, use: ['style-loader', 'css-loader'] }
         ]
     }

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader.

需要注意的是，use 数组中指定的 loader 顺序是固定的；多个 loader 的调用顺序是：从后往前调用

#### 4.2 打包less文件 ####

*  运行 `npm i less-loader less -D` 命令
 *  在 `webpack.config.js` 的 `module -> rules` 数组中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
     module: { 
         rules: [
           {  test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

#### 4.3 打包scss文件 ####

*  运行 `npm i sass-loader node-sass -D` 命令
 *  在 `webpack.config.js` 的 `module -> rules` 数组中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
     module: { 
         rules: [
           {  test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
         ]
    }

#### 4.4 添加CSS的兼容前缀 ####

有些CSS样式在一些浏览器中需要添加前缀才能兼容，这时我们可以配置 `postCSS` 来自动添加 css 的兼容前缀，配置步骤如下：

*  运行 `npm i postcss-loader autoprefixer -D` 命令
 *  在项目根目录中创建 `postcss` 的配置文件 `postcss.config.js`，并初始化如下配置：

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
        module.exports = { 
           plugins: [ autoprefixer ] // 挂载插件
        }

*  在 `webpack.config.js` 的 `module -> rules` 数组中，修改 css 的 loader 规则如下：

module: { 
       rules: [
          {  test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
       ]
    }

#### 4.5 打包样式中的图片和字体文件 ####

Webpack默认无法处理样式表中的路径，所以需要安装loader来协助打包，配置过程：

*  运行 `npm i url-loader file-loader -D` 命令
 *  在 `webpack.config.js 的 module -> rules` 数组中，添加 loader 规则如下：

module: { 
         rules: [
           {  
              test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
              use: 'url-loader?limit=16940'
           }
        ]
     }

其中， `?` 之后的是 loader 的参数项。`limit` 用来指定图片的大小，单位是字节(byte)，只有小于 `limit` 大小的图片才会被转为 `base64` 图片。

#### 4.6 打包JS文件中的高级语法 ####

*  安装babel转换器相关的包：`npm i babel-loader @babel/core @babel/runtime -D`
 *  安装babel语法插件相关的包：`npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D`
 *  在项目根目录中，创建 `babel` 配置文件 `babel.config.js` 并初始化基本配置如下：

module.exports = { 
        presets: [ '@babel/preset-env' ],
        plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties’ ]
    }

*  在 `webpack.config.js` 的 `module -> rules` 数组中，添加 loader 规则如下：

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
     {  test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

[20200614104121822.png]: https://img-blog.csdnimg.cn/20200614104121822.png?
[20200623002020525.png]: https://img-blog.csdnimg.cn/20200623002020525.png?