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

  • 相关阅读:
    HDU 1828 Picture (线段树:扫描线周长)
    [USACO18OPEN] Multiplayer Moo (并查集+维护并查集技巧)
    NOIP2016 天天爱跑步 (树上差分+dfs)
    NOIP2013 华容道 (棋盘建图+spfa最短路)
    NOIP2015 运输计划 (树上差分+二分答案)
    NOIP2018 前流水账
    luogu P2331 [SCOI2005]最大子矩阵
    luogu P2627 修剪草坪
    CF101D Castle
    luogu P2473 [SCOI2008]奖励关
  • 原文地址:https://www.cnblogs.com/front-web/p/12228187.html
Copyright © 2011-2022 走看看