hoyong

导航

webpack安装和使用(转)

一、webpack是什么？

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其他都是细枝末节了

二、安装webpack

①前提，你的电脑需要安装node和npm,如果没的话先去官方下载!!!
我是全局安装的： npm install webpack -g 个人觉得最好在你的项目中也包含一份独立的 Webpack，这样你更方便管理你的项目 npm install --save-dev webpack 如果安装成功 会显示如下图

alt text

②通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
安装webpack依赖包
安装依赖包成功 会显示下图 红色线条是路径

alt text

$ npm install webpack --save-dev
Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。
检查webpack版本
$ npm info webpack
如果需要使用 Webpack 开发工具，要单独安装：
$ npm install webpack-dev-server --save-dev

二、使用webpack

①首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')
②然后编译 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js
③打包过程会显示日志：
Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]
④用浏览器打开 index.html 将会看到 It works. 接下来添加一个模块 module.js 并修改入口 entry.js：
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
⑤重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.57 kB       0  [emitted]  main
   [0] ./entry.js 66 bytes {0} [built]
   [1] ./module.js 43 bytes {0} [built]
⑥Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

安装webpack的教程https://v.qq.com/x/page/m0380s6tk4s.html

posted on 2019-05-10 14:26  hoyong  阅读(161)  评论(0)  编辑  收藏  举报