编写目的
1. 使用 Node 依赖webpack、jQuery编写简单的前端应用。
操作步骤
(1)新建一个目录
$ mkdir simple-app-demo
$ cd simple-app-demo
(2)在该目录下,新建一个package.json
文件。
$ npm init -y
package.json
是项目的配置文件。
(3)安装jquery
、webpack
、webpack-cli
这三个模块。
$ npm install -S jquery
$ npm install -S webpack webpack-cli
打开package.json
文件,会发现jquery
、webpack
和webpack-cli
都加入了dependencies
字段,并且带有版本号。
(4)在项目根目录下,新建一个网页文件index.html
。
<html>
<body>
<h1>Hello World</h1>
<script src="bundle.js"></script>
</body>
</html>
(5)在项目根目录下,新建一个脚本文件app.js
。
const $ = require('jquery');
$('h1').css({ color: 'red'});
上面代码中,require
方法是 Node 特有的模块加载命令。
(6)打开package.json
,在scripts
字段里面,添加一行。
"scripts": {
"build": "webpack --mode production ./app.js -o ./bundle.js",
"test": "...."
},
(7) 在项目根目录下,执行下面的命令,将脚本打包。
$ npm run build
执行完成,可以发现项目根目录下,新生成了一个文件bundle.js
。
(8)浏览器打开index.html
,可以发现Hello World
变成了红色。
修改代码重新编译
1. 修改代码样式后,重新编译生成打包文件即可。