首页 > 代码库 > webpack安装使用
webpack安装使用
1、安装：
首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
用 npm 安装 Webpack：$ npm install webpack -g
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack —save-dev
Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。
# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev
如果需要使用 Webpack 开发工具，要单独安装：
$ npm install webpack-dev-server —save-dev
2、使用webpack
首先创建一个静态页面 index.html 和一个 JS 入口文件 require.js：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://www.mamicode.com/bundle.js"></script>
</body>
</html>
// require.js里边随意编辑点内容
document.write(‘这是我的第一个webpack例子.’)
然后编译 require.js 并打包到 bundle.js：//bundle.js是大包编译新生成的一个js
$ webpack require.js bundle.js
打包过程会显示日志：
Hash: e964f90ec65eb2c29bb9
Version: webpack 2.3.2
Time: 54ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./require.js 27 bytes {0} [built]
用浏览器打开 index.html 将会看到 这是我的第一个webpack例子. 。
接下来添加一个模块 module.js 并修改入口 require.js：
// module.js
module.exports = ‘这个是来自 module.js.‘
// require.js
document.write(‘这是我的第一个webpack例子.’)
document.write(require(‘./module.js‘)) // 添加模块
重新打包 webpack require.js bundle.js 后刷新页面看到变化 ‘这是我的第一个webpack例子.这个是来自 module.js.’
Hash: 279c7601d5d08396e751
Version: webpack 2.3.2
Time: 63ms
Asset Size Chunks Chunk Names
bundle.js 1.57 kB 0 [emitted] main
[0] ./require.js 66 bytes {0} [built]
[1] ./module.js 43 bytes {0} [built]
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 require.js 中的代码，其它模块会在运行 require 的时候再执行。
//自动编译监听
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
$ webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
$ webpack --progress --colors —watch //修改保存后自动编译
当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装
$ npm install webpack-dev-server -g
# 运行
$ webpack-dev-server --progress --colors
webpack安装使用