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

2021-04-25 16:29

阅读：645

标签：htm 字段 style hello dep 模块加载简单样式 rip

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 Worldh1>
    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编写简单的前端应用

标签：htm 字段 style hello dep 模块加载简单样式 rip

原文地址：https://www.cnblogs.com/front-web/p/12228187.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Node 使用webpack编写简单的前端应用
文章链接：http://soscw.com/index.php/essay/79457.html

亲，登录后才可以留言！