当前位置：首页 > Web开发 > 正文

"scripts" : { "build": "webpack --mode production ./app.js

2024-03-31 Web开发

标签：

编写目的

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. 改削代码样式后，从头编译生成打包文件即可。

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

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31130.html