033_webpack打包ES6模块化工程

1. 新建项目

1.1. 新建一个ES6Model文件夹

1.2. 打开VSCode 

1.3. 使用VSCode打开文件夹 

1.4. 选择要打开的文件夹 

1.5. 资源管理器中显示打开的文件夹 

1.6. 在终端中运行: npm init -y命令, 初始化包管理器文件package.json 

1.7. 在ES6Model下新建一个src目录, 在src目录下新建一个index.html 

1.8. 在终端中运行: npm install jquery -S命令, 安装JQuery。 

1.9. 在src目录下新建一个index.js, 适用JQuery实现列表隔行变色 

2. 安装和配置webpack

2.1. 在终端中运行: npm install webpack webpack-cli -D命令, 安装webpack相关包

 

2.2. 在项目根目录中, 创建webpack.config.js的webpack配置文件。在webpack文件中, 初始化如下配置: 

2.3. 在package.json文件的scripts节点下, 新增dev: webpack脚本。scripts节点下的脚本, 可以通过npm run执行。 

2.4. 在终端中运行: npm run dev命令, 启动webpack进行项目打包。 

2.5. 打包完成后, 在项目根目录下生成了一个dist目录, 该目录下生成了main.js 

2.6. 在index.html中导入main.js 

2.7. 打开index.html, 查看效果图 

3. webpack打包的入口与出口

3.1. webpack的4.x版本中, 打包的入口与出口默认约定:

3.1.1. 打包的入口文件为src——>index.js

3.1.2. 打包的出口文件为dist——>main.js

3.2. 如果要修改打包的入口与出口, 可以在webpack.config.js中新增如下配置信息:

4. 配置webpack的自动打包功能

4.1. 在终端中运行: npm install webpack-dev-server -D命令, 安装支持自动打包的工具

 

4.2. 修改packgae.json的scripts中的dev为webpack-dev-server 

4.3. 修改webpack.config.js, 配置devServer的静态目录为项目根目录 

4.4. 导入的js文件, 不再有./dist目录 

4.5. 重新进行打包, 可以看到终端并没有结束, 如果我们修改代码, 它会自动重新打包 

4.6. 访问http://localhost:8080/ 

4.7. 访问http://localhost:8080/src/ 

5. 配置html-webpack-plugin生成预览页面

5.1. 在终端中运行: npm install html-webpack-plugin -D命令, 安装生成预览页面的插件

 

5.2. 修改webpack.config.js, 配置生成预览页面插件 

5.3. 访问http://localhost:8080 

6. 配置打包完成后自动打开页面

6.1. --open打包完成后自动打开浏览器页面

6.2. --host配置IP地址

6.3. --port配置端口

6.4. 重新打包后, 自动浏览器打开页面