Node 使用webpack编写简单的前端应用

编写目的

1. 使用 Node 依赖webpack、jQuery编写简单的前端应用。

操作步骤

(1)新建一个目录

$ mkdir simple-app-demo
$ cd simple-app-demo

(2)在该目录下,新建一个package.json文件。

$ npm init -y

    package.json是项目的配置文件。

(3)安装jquerywebpackwebpack-cli这三个模块。

$ npm install -S jquery
$ npm install -S webpack webpack-cli

      打开package.json文件,会发现jquerywebpackwebpack-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. 修改代码样式后,重新编译生成打包文件即可。

猜你喜欢

转载自www.cnblogs.com/front-web/p/12228187.html
今日推荐