当前位置:  首页  >  前端开发  >  JavaScript

Webpack入门教程

Webpack是一个前端资源加载打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

本章节基于 Webpack3.0 测试通过。

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

安装 Webpack

在安装 Webpack 前,你本地环境需要支持 node.js。

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

使用 cnpm 安装 webpack:

cnpm install webpack -g

创建项目

接下来我们创建一个目录 app:

mkdir app

在 app 目录下添加 runoob1.js 文件,代码如下:

document.write("It works.");

在 app 目录下添加 index.html 文件,代码如下:


    
        
    
    
        




















    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有