-
命令行输入
npm i webpack -q
,全局安装 webpack -
在项目的根目录下(按住 shift 键 + 鼠标右键 进入项目根目录) 运行
npm i webpack --save-dev
安装到项目依赖中 -
创建项目初始结构。dist文件夹存放的是打包过后的资源文件
-
运行
npm init -y
初始化项目,使用npm管理项目中的依赖包 -
使用
npm i jquery -s
安装 jQuery类库到这一步为止,项目基本结构大致成形
-
在 main.js 里设置隔行变色
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor','red')
$('li:even').css('backgroundColor',function(){
return '#' + 'D97634'
})
})
- 运行
webpack 入口文件路径 输出文件路径
对main.js
进行处理。运行
webpack src/main.js -o dist/bundle.js
命令格式: webpack 要打包的文件路径 打包好的输出文件路径
注意如果提示没有webpack-cli,安装:
npm install webpack-cli -g
index.html
中引入<script src="../dist/bundle.js"></script>
两种方式实现打包:
1.通过命令格式:webpack 要打包的文件路径 打包好的输出文件路径
2.通过 webpack 命令(可实现多次打包修改后的JS文件)
-
首先创建
webpack.config.js
文件
-
执行 webpack 命令
使用 webpack 命令说明:
当我们在 控制台,直接输入 webpack 命令执行的时候,webpack 做了以下几步:
1.首先,webpack发现,我们并没有通过命令的形式(webpack src/main.js -o dist/bundle.js),给它指定入口和出口
2.webpack 就会去 项目的根目录中,查找一个叫做 'webpack.config.js' 的配置文件
3.当找到配置文件后,webpack 会去解析执行这个 配置文件,当解析执行完配置文件后,就得到了配置文件中导出的 配置对象
4.当 webpack 拿到 配置对象后,就得到配置对象中指定的 入口 和 出口,然后进行打包构建。