webpack 基础使用

女爷i 2022-12-26 11:12 126阅读 0赞

距离上次学习webpack已经几个月了，上次只是简单看了个视频，很短，也不细，所以打算把尚硅谷2020最新版Webpack视频看一遍，巩固完善一下知识点。感兴趣的可以去看我的博客[webpack 基本概念][webpack]

#### 1. 初始化package.json ####

npm init

#### 2. 下载并安装webpack ####

上次学webpack安装的是 3.5.3 版本的，这次下载个最新版本试试。（再次下载会自动覆盖之前版本）

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

#### 3. 创建文件 ####

创建 src 文件夹，创建index.js 入口文件，代码如下：

function add(x, y) { 
      return x + y;
    }
    
    console.log(add(1, 2));

#### 4. 运行指令 ####

1.  开发环境指令：

webpack ./src/index.js -o ./build/built.js --mode=development

*  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境，是开发环境。
 *  功能：webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法。
 *  打包成功结果图：  
    ![在这里插入图片描述][20201205081656855.png]  
    ![在这里插入图片描述][20201205081800415.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

1.  生产环境指令：

webpack ./src/index.js -o ./build/built.js --mode=production

*  webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境，是生产环境。
 *  功能：在开发配置功能上多一个功能，压缩代码。
 *  打包成功结果图：  
    ![在这里插入图片描述][2020120508201546.png]  
    ![在这里插入图片描述][20201205082025629.png]  
    ![在这里插入图片描述][20201205082044795.png]

#### 5. 在 build 文件夹中创建 index.html 文件，并引入打包后的资源 ####

![在这里插入图片描述][20201205082844599.png]

运行结果：  
![在这里插入图片描述][20201205082930757.png]

#### 6. 创建json文件，并在 index.js 中引入，重新打包 ####

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

import data from './data.json';
    console.log(data);

webpack ./src/index.js -o ./build/built.js --mode=development

打包结果：  
![在这里插入图片描述][20201205083318728.png]  
![在这里插入图片描述][20201205083343802.png]  
![在这里插入图片描述][20201205083415305.png]  
可见，可以打包json文件。

#### 7. 创建 index.css 文件，并在 index.js 中引入，重新打包 ####

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

import './index.css';

webpack ./src/index.js -o ./build/built.js --mode=development

打包结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
打包失败。

#### 8. 结论 ####

*  webpack能处理js/json资源，不能处理css/img等其他资源
 *  生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
 *  生产环境比开发环境多一个压缩js代码。

[webpack]: https://blog.csdn.net/qq_43652492/article/details/107752336
[20201205081656855.png]: /images/20221120/efac973e45d54d42aa87a7dbb3cbf846.png
[20201205081800415.png]: /images/20221120/98bdf175117341018f2f39557bfb382f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/31564e6c6ff844a68864083718d57c68.png
[2020120508201546.png]: /images/20221120/bd6caaad997948aa929812469547768e.png
[20201205082025629.png]: /images/20221120/9a9b08dccd014f73b5889aed184c23d4.png
[20201205082044795.png]: /images/20221120/d0f9c1e4b463404fb36f7a387b6b1198.png
[20201205082844599.png]: /images/20221120/6671baf1b94d4637838239f22a513568.png
[20201205082930757.png]: /images/20221120/8ce7fe0c86734344847fb9d02d0cecf7.png
[20201205083318728.png]: /images/20221120/b4d4a314f23f4c918b1648d1fb2b2e21.png
[20201205083343802.png]: /images/20221120/77e65c0e1dbc4f9e8e9f5719e89a4eac.png
[20201205083415305.png]: /images/20221120/8234fd09334d465899df616312581b0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221120/749989ae7ce74b849486091fbde2a672.png