WebPack使用(一)

一:安装


Webpack 本身只能处理 JavaScript 模块

(1)要先安装Node.js,Node.js自带软件包管理器npm,建议使用最新的Node.js

(2)用npm安装WebPack:

$ npm install webpack  -g

Webpack 已经安装到了全局环境下,可以通过命令行webpack -h试试。

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。

# 进入项目目录

# 确定已经有 package.json,没有就通过 npm init 创建# 

安装 webpack 依赖

$ npm install webpack --save-dev

如果需要使用 Webpack 开发工具,要单独安装:

$ npm install webpack-dev-server --save-dev

二:使用


(1)创建一个项目(例:webpack)

(2)安装webpack

在项目位置运行命令行(shift+右键),运行安装命令

$ npm install webpack  -g

(3)创建package.json

npm init

(4)创建一个index.html和一个JS入口文件entry.js

entry.js

(3)然后编译 entry.js 并打包到 bundle.js:

$ webpack entry.js bundle.js

然后文件夹里面会生成一个bundle.js


打包过程会显示日志,如下

用浏览器打开index.html将会看到It works.

(7)接下来添加一个模块module.js,并修改入口entry.js

重新打包webpack entry.js bundle.js后,刷新页面看到变化     It works.It works from module.js.

结束语:

Webpack 会分析入口文件,解析包含依赖关系的各个文件。

这些文件(模块)都打包到 bundle.js 。

Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行require的时候再执行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,237评论 7 35
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,515评论 2 71
  • 不要做爱情的乞丐,别让爱成为一个彼此依赖、控制、要求的理由,大好的一个人,凭什么跑到别人的生命里去当插曲!
    垚小妖阅读 140评论 0 0
  • 吴京,好样的! 首先,这部电影非常符合中国老百姓的口味,极大满足了观影者的内心需求:中国人可以向别人say no了...
    许卫峰阅读 368评论 4 1
  • 就在那天哥哥打完电话以后,这心就再也没有平静过。 首先是一顿痛不欲生的大哭,一只手死死地抓住身边老公的胳膊,久久不...
    西瓜甜甜啦阅读 2,226评论 2 13