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

安装

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：监听，用于设置文件改动后直接打包

使用webpack

1. 创建项目

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

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

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

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

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

7. 运行 HTML 查看效果

说明