zoukankan      html  css  js  c++  java
  • 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. 修改代码样式后,重新编译生成打包文件即可。

  • 相关阅读:
    11111 Generalized Matrioshkas
    Uva 442 Matrix Chain Multiplication
    Uva 10815 Andy's First Dictionary
    Uva 537 Artificial Intelligence?
    Uva 340 MasterMind Hints
    SCAU 9508 诸葛给我牌(水泥题)
    Uva 10420 List of Conquests(排序水题)
    Uva 409 Excuses, Excuses!
    10/26
    11/2
  • 原文地址:https://www.cnblogs.com/front-web/p/12228187.html
Copyright © 2011-2022 走看看