Day25——webpack的使用

红太狼 2023-03-02 04:48 7阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. webpack的使用
 *   *  2.1 什么是webpack
     *  2.2 前端模块化
     *  2.3 打包
     *  2.4 和grunt/gulp对比
     *  2.5 webpack与node的关系
     *  2.6 安装webpack
     *  2.7 webpack的基本使用
     *  2.8 webpack的配置
     *   *  2.8.1 问题背景
         *  2.8.2 如何配置简单的webpack命令
         *  2.8.3 配置webpack映射为npm run
         *  2.8.3.1 问题背景
         *  2.8.3.2 实现npm run build代替webpack
         *  2.8.3.3 使用npm run build的好处
     *  2.9 webpack的loader
     *   *  2.9.1 什么是loader
         *  2.9.2 loader的使用过程
         *  2.9.3 步骤

# 一. 回顾 #

前面学习了[Day24——前端模块化][Day24]，今天学习webpack的使用

# 二. webpack的使用 #

## 2.1 什么是webpack ##

从本质上讲，它是一个JavaScript应用的**静态模块打包**工具

那么什么是静态模块打包呢？

## 2.2 前端模块化 ##

前端模块化有比较多的解决方案，目前主流常见的有CommonJS，ES6，AMD，CMD。

通过模块开发完成项目后，**需要处理模块之间的各种依赖，并且要将他们整合打包**。

**webpack的其中一个核心就是帮助我们处理模块间的依赖关系。不仅仅是JS文件，CSS、图片、json文件等等在webpack中都可以被当作模块来使用**。后面会详细阐述。

## 2.3 打包 ##

**总结一句就是讲webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）**

打包的过程中，可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法（有些应用不支持ES6，所以要降级使用），将TypeScript转成JavaScript等等。

从上面了解webpack的打包功能，那么似乎用grunt/gulp也可以完成目的。有什么不同呢？

## 2.4 和grunt/gulp对比 ##

*  grunt/gulp **更加强调前端流程的自动化**，模块化不是它的核心
 *  webpack **更加强调模块化开发管理**，而文件压缩合并、预处理等功能，是它附带的功能。

## 2.5 webpack与node的关系 ##

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

## 2.6 安装webpack ##

*  安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
 *  查看自己的node版本：node -v
 *  使用`npm install webpack@3.6.0 -g`指定全局安装的webpack，版本是3.6.0，因为vue cli2依赖该版本。
 *  局部安装webpack。（后续才需要用到）–save-dev是开发时依赖，项目打包后不需要继续使用

cd 对应目录
    npm install webpack@3.6.0 --save-dev

## 2.7 webpack的基本使用 ##

构建目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]  
**注意代码中的注释，很重要**，代码如下：

info.js

//ES6导出规范
    export const name = 'why';
    export const age = 18;
    export const height = 1.88;

mathUtils.js

function add(num1, num2) { 
      return num1 + num2;
    }
    
    function mul(num1, num2) { 
      return num1 * num2;
    }
    
    
    //commonJs的模块化规范
    module.exports = { 
      add,
      mul,
    }

main.js

//1.commonjs的模块化规范
    const { add, mul} = require('./mathUtils.js');
    
    console.log(add(20, 30));
    console.log(mul(20, 30));
    
    //2。ES6的模块化规范
    import { name, age, height} from "./info";
    
    console.log(name);
    console.log(age);
    console.log(height);

index.html

打包的命令：`cd 进文件夹，然后webpack 需要打包的文件 打包好的文件的存储位置`，如下：

cd 01-webpack的起步
    
    webpack ./src/main.js ./dist/bundle.js

**效果如下：**

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

## 2.8 webpack的配置 ##

### 2.8.1 问题背景 ###

**webpack的指令要求输入被打包的文件以及存储位置，有时候经常用到webpack打包的话会很麻烦，所以我们可以配置这个被打包的文件路径以及存储位置。**

### 2.8.2 如何配置简单的webpack命令 ###

首先我们重新copy刚才的工程，然后创建一个名为webpack.config.js的文件，名字是固定的不能改。如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]

webpack.config.js文件如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]  
这样就成功配置了。

### 2.8.3 配置webpack映射为npm run ###

### 2.8.3.1 问题背景 ###

有时候需要使用局部的webpack，而不是全局的webpack，那么怎么办？  
答：对webpack做配置

### 2.8.3.2 实现npm run build代替webpack ###

在刚刚生成的package.json中，配置如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 6]  
然后我们安装局部的webpack，代码如下：

npm install webpack@3.6.0 --save-dev

### 2.8.3.3 使用npm run build的好处 ###

npm run 会优先使用局部安装的webpack，而webpack是使用全局使用的webpack。有时候实际需要是webpack的某些版本，那么自己可以配置本地的webpack。

## 2.9 webpack的loader ##

### 2.9.1 什么是loader ###

有时候我们不仅要对js做处理，还要对css、图片、typscript等等做处理，但是webpack本身是不支持的，但是加入loader后，就能完成这些处理。

### 2.9.2 loader的使用过程 ###

1.  通过npm安装需要使用的loader
2.  在webpack.config.js文件中的modules关键字下进行配置

注：大部分的loader都可以在[webpack官网][webpack]找到，并且学习对应的用法

### 2.9.3 步骤 ###

首先去webpack找对应的loader，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 9]  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 10]  
下面贴出代码：  
webpack.config.js

//要动态获取path路径，就要用到node语法
    const path = require('path');//path文件无需自己写，但是要用npm init命令初始化
    
    //通过commonjs模块化规范导出一些东西
    module.exports = { 
      entry: './src/main.js',//入口
      output: {  //output是出口，要求是一个对象，有path路径属性以及filename文件名属性
        path: path.resolve(__dirname, 'dist'), //path要求使用绝对路径，所以要动态获取路径,resolve()函数会将__dirname和’dist‘拼接起来
        filename: 'bundle.js',
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,//这是正则表达式，匹配所有css文件
            //css-loader只负责加载，不负责解析，所以没有css效果展示在浏览器
            //style-loader负责将样式添加到DOM中生效
            //使用多个loader时，是从右向左读取的，所以先加载css-loader，才到style-loader
            use: ['style-loader', 'css-loader' ]
          }
        ]
      }
    }

[Day24]: https://blog.csdn.net/qq_40634846/article/details/107613905
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230208/7afac28547b54b16854f70e81d6ffdb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200727170333361.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200727170417913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200727171432697.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200727172226837.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200727172435831.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200727173117292.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[webpack]: https://www.webpackjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200727174155610.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200727174250503.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200727174523203.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200727174902201.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70