webpack打包

webpack打包

1. 创建项目描述文件. 运行npm init -y初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构src 和 dist,在src里新建index.html
3. 使用npm i jquery -S安装jquery类库
4. 创建index.js并书写各行变色的代码逻辑：
// 导入jquery类库
import $ from ‘jquery’
// 设置偶数行背景色，索引从0开始，0是偶数
$(’#list li:even’).css(‘backgroundColor’,‘lightblue’);
// 设置奇数行背景色
$(’#list li:odd’).css(‘backgroundColor’,‘pink’);
5. 直接在页面上引用index.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
6. webpack4版本需要安装webpack-cli 才能执行webpack命令 全局和局部都要安装
npm i webpack-cli webpack -g
再局部安装,在当前项目路径下安装
npm i webpack webpack-cli -D

7. 运行webpack 入口文件路径 输出文件路径对index.js进行处理：

webpack .\src\js\index.js -o .\dist\index.js

**8.**而webpack4允许我们指定编译使用开发模式还是生产模式，这由mode这个配置来控制，value为枚举值：development/production，分别对应开发模式和生产模式（这个配置可以作为命令行的配置参数也可以作为配置文件中的一个配置项，默认值是production，即生产模式）。

设置打包模式为开发模式:  webpack .\src\js\index.js -o .\dist\index.js --mode development



           使用webpack的配置文件简化打包时候的命令