webpack 是一个用来构建我们应用程序中的 JavaScript 模块的工具。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置，比如为生产环境拆分 vendor/css/js 代码，对图片进行base64转码，通过运行开发服务器（development server）来实现无刷新热重载（hot-reload）通过babel进行es6的转码，可以解析市面上很多预css编译等很多酷炫的特性。
我们先尝个鲜，创建一个示例来演示一下
因为现在是基于2.0的讲解，在开始前，先要确认你已经安装 Node.js 的最新版本。使用 Node.js 最新的 LTS 版本，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或缺少相关 package 包。
如何安装npm我就不多说了，大家都知道的，网上的例子很多，这里就不多叙述了
注意
我们先全局安装一下通过
npm install webpack -g
安装好之后我们看一下webpack的版本
webpack --help || webpack -v 这里就会显示版本号如果是2.0以上的没有问题
如果以前在全局安装过的话请自己升个级
npm install webpack -g
我们来试着弄一个demo,本人用的是windows,打开cmd
mkdir wepback2.0 && cd webpack2.0
再生成一个package.json文件,这是一个存方说明的文件，以json的格式存放，每个字段都代表不同的含义，不懂的可以看这个阮大神的讲解http://javascript.ruanyifeng.com/nodejs/packagejson.html
先简单的初始化
npm init -y
建一个 app文件夹，再app里创建一个 index.js 文件。
app/index.js
function component () {
var element = document.createElement('div');
/* 需要引入 lodash，下一行才能正常工作 */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component())
我们在根目录下再创建一个Index.html
要运行这段代码，通常需要有以下 HTML ：
webpack2.0/index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
在此示例中，<script> 标签之间存在隐式依赖关系。
常规用法存在的问题
运行 index.js 会依赖于页面中提前引入的 lodash。之所以说是隐式的是因为 index.js 并未显式声明需要引入 lodash，只是假定推测已经存在一个全局变量 _。
使用这种方式去管理 JavaScript 项目会有一些问题：
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
如果依赖被引入但是并没有使用，那样就会存在许多浏览器不得不下载的无用代码。
用webpack打包的改进方案
要在 index.js 中打包 lodash 依赖，首先我们需要安装 lodash。
npm install --save lodash
因为在生产环境我们全使用到lodash，所以我们不用加-dev
然后引入（import）它。
app/index.js
+ import _ from 'lodash';
function component () {
｝
当然我们还要修改 index.html，来引入打包好的单个 js 文件。
<html>
<head>
<title>webpack 2 demo</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script>
</body>
</html>
在这里，index.js 显式要求引入的 lodash 必须存在，然后将它以 _ 的别名绑定（不会造成全局范围变量名污染）。
通过声明模块所需的依赖，webpack 能够利用这些信息去构建依赖图表，然后使用图表生成一个优化过的，会以正确代码顺序被运行的 bundle。并且没有用到的依赖将不会被 bundle 引入。
现在在此文件夹下带上以下参数运行 webpack，其中 index.js 是入口文件，bundle.js 是已打包所需的所有代码的输出文件。因为我们前面全局安装过了webpack，所以我们可以在任何盘下运行
webpack js/index.js dist/bundle.js
//js/index代表我们要打包的文
//dist/bundle.js代表我们打到后的文件
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
在浏览器中打开 index.html，查看构建成功后的 bundle 的结果。你应该能看到带有以下文本的页面：‘Hello webpack’。
你注意到在 app/index.js
中使用的 ES2015 模块引用（module import） 了吗？尽管 import/export
语句在浏览器中还未被支持，你也可以正常的使用，因为 webpack 会将其替换为 ES5 兼容的代码。你可以审查 dist/bundle.js 的代码来说服你自己放心使用。
注意 webpack 将不会更改你的 import/export
除外的代码。如果你在使用其它 ES2015 特性，确保你使用了一个像是 Babel 或 Bublé 的转译器。
使用带有配置的 webpack
对于更复杂的配置，我们可以使用一个配置文件，webpack 会参考它来打包代码。创建一个 webpack.config.js 文件后，你可以通过以下配置向 CLI 命令传达和前面一样的信息。
我们还是像在根目录下创建一个webpack.config.js
这个跟我们在cli命令行输入命令一下，后面webpack会通过解析这个文件来知道你所需要的配置
var path = require('path'); //这个是引入Node的path路径模块用来解析路径的
var webpack = require("webpack"); //引入webpack来进行
module.exports = {
entry: './js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
配合 npm 使用
考虑到用 CLI 这种方式来运行 webpack 不是特别方便，我们可以设置一个快捷方式。像这样调整 package.json：
{
...
"scripts": {
"build": "webpack" //我们能过package.json里的script脚本来进行启动
},
...
}
现在你可以通过使用 npm run build 命令来实现与上面相同的效果。npm 通过命令选取脚本，并临时修补执行环境
网友评论