webpack入门教程

原创 郭兴旺 教程 学习笔记 1130阅读 2017-02-15 19:27:48 举报

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

webpack入门教程
从图中可以看出,Webpack可以将多种静态资源js、css、less装换成一个静态文件,减少了页面的请求。

一、安装Webpack
在安装Webpack前,本地环境需要支持node.js。
判断是否装了node.js

webpack入门教程

使用npm install webpack -g命令安装webpack

webpack入门教程

二、创建项目
创建一个目录app:mkdir app

webpack入门教程
这是在C:\Users\Administrator\目录下会出现一个文件夹app,就是我们刚刚创建的。

在app文件夹下添加一个js文件runoob1.js,代码如下
javascript 代码

在app文件夹下添加一个index.html 文件,代码如下
html 代码

接下来使用webpack命令来打包:webpack runoob1.js bundle.js。执行此命令会编译runoob1.js并生产bundle.js文件(注意,要进入app目录下执行此命令),成功后输出信息如下:

webpack入门教程

在浏览器中打开index.html文件,输出结果如下:

webpack入门教程

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复