了解webpack-从入门开始

秒速五厘米 2023-07-18 03:11 77阅读 0赞

1.1 webpack是什么  
webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。  
在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。  
它根据模块依赖关系进行静态分析，打包生成对应的静态资源（bundle）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

1.2 webpack的5个核心概念  
1.2.1 Entry  
入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。  
1.2.2 Output  
输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。  
1.2.3 Loader  
Loader 让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）  
1.2.4 Plugins  
插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。  
1.2.5 Mode  
模式（Mode）指示webpack使用相应模式的匹配

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>描述</th> 
   <th>特点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>development</td> 
   <td>会将DefinePlugin中process.evn.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin.</td> 
   <td>能让代码本地调试运行的环境</td> 
  </tr> 
  <tr> 
   <td>production</td> 
   <td>会将DefinePlugin中process.envNode_ENV的值设置为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoemitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TeserPlugin。</td> 
   <td>能让代码优化上线运行的环境</td> 
  </tr> 
 </tbody> 
</table>

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

2 webpack 初体验  
2.1初始化配置  
1， 初始化package.json  
输入指令：  
npm init  
2，下载并安装webpack  
输入指令：  
npm install webpack webpack-cli -g  
npm install webpack webpack-cli -D  
2.2 编译打包应用

1，创建文件  
2，运行指令  
开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development  
功能：webpack能够编译打包js和json文件，并且能够将es6的模块化语法转换成浏览器能够识别的语法。  
生产环境指令： webpack src/js/index.js -o build/js/built.js --mode=production  
功能：在开发配置功能上多一个功能，压缩代码。  
3，结论  
webpack能够编译打包js和json文件。  
能将es6的模块化语法转换成浏览器能识别的语法。  
能压缩代码  
4.问题  
不能编译打包css，img等文件。  
不能将js的es6基本语法转化为es5以下语法。  
（解决以上问题，webpack有其他处理方式。）

webpack初体验 代码如下：  
package.json

{
      "name": "webpack_test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.4.1"
      }
    }

index.js

/*
      index.js: webpack入口起点文件
    
      1. 运行指令：
        开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
          webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
          整体打包环境，是开发环境
        生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
          webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
          整体打包环境，是生产环境
    
       2. 结论：
        1. webpack能处理js/json资源，不能处理css/img等其他资源
        2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
        3. 生产环境比开发环境多一个压缩js代码。
    */
    // import './index.css';
    
    import data from './data.json';
    console.log(data);
    
    function add(x, y) {
      return x + y;
    }
    
    console.log(add(1, 2));

data.json

{
      "name": "jack",
      "age": 18
    }

index.css

html,
    body {
      height: 100%;
      background-color: pink;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/248abec270b74b138580f3a842c0b656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/f6efb6c48b6c4fc296192d0808dc5f2e.png