webpack模块化工具的安装及使用

向右看齐 2024-03-29 15:54 47阅读 0赞

### 安装 ###

npm inistall webpack -g

npm inistall webpack-cli -g

webpack -v

webpack-cli -v

### 配置 ###

创建 webpack.config.js 文件

*  entry：入口文件，指定 WebPack 用哪个文件作为项目的入口

*  output：输出，指定 WebPack 把处理完成的文件房知道指定路径

*  module：模块，用于处理各种类型的文件

*  plugins：插件，如：热更新、代码重用等

*  resolve：设置路径指向

*  watch：监听，用于设置文件改动后直接打包

![7b4cb71c5827b3d03d18055f5b9ef9af.png][]

### 使用webpack ###

1.  创建项目

1.  创建一个名为 modules 的目录，用于放置 JS模块等资源文件

1.  在 modules 下创建模块文件，如 hello.js，用于编写 JS 模块相关的代码

![0fd8990137e2d016afa04aee0dcf9ec3.png][]

1.  在modules下创建一个名为 main.js 的入口文件，用于打包是设置 entry 属性

![b8d3f5de0874cec7764b83ace73542be.png][]

1.  在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包

![c393c39a7f9774f2506a4c29e79ed198.png][]

1.  在项目目录下创建 HTML 页面，如 index.html，导入 WebPack 打包后的 JS 文件

![739287b87ae8394005d43afd2cf27d59.png][]

1.  运行 HTML 查看效果

### 说明 ###

![b2faf4b2720ece954aeb81215807fd1b.png][]

[7b4cb71c5827b3d03d18055f5b9ef9af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2c2bb86cf9cb45d39dbb8f3d3d17bc50.png
[0fd8990137e2d016afa04aee0dcf9ec3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/cf16130e7a9d4a088dfa400daa680bb1.png
[b8d3f5de0874cec7764b83ace73542be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/e7fe3313599944f1946be2e7d56c2896.png
[c393c39a7f9774f2506a4c29e79ed198.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/a5f8809ebcc149ecb49c2805d5ae4cca.png
[739287b87ae8394005d43afd2cf27d59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/2e02459ee87e4875864ced768a178819.png
[b2faf4b2720ece954aeb81215807fd1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/3336a521f47d4e57897133bfc750ee3a.png