开始
webpack能够通过npm来安装。可以通过npm install -g webpack来全局安装，或者作为项目的以来关系来安装npm install --save-dev webpack。
新建一个小项目
让我们创建一个小的项目来应用webpack。
先新建一个空的文件夹，然后初始化一个package.json，那什么是package.json呢？是一个nodejs的包依赖关系清单，类似于rails的gemfile，通过npm init来初始化一个package.json。
然后我们来安装webpack作为该项目的依赖关系npm install webpack --save-dev
在项目初始化和webpack安装完之后，让我们创建我们的项目的目录结构（其中node_modules文件夹是该项目所依赖的包安装的位置）。首先我们创建app文件夹来放我们的项目的源码，然后创建一个public文件夹来放一些浏览器中用的文件，其中包括index.html和webpack打包app中源文件产生的文件。app文件夹中有两个文件一个main.js一个Greeter.js。
如图：
Paste_Image.png
这个index.html将包括基本的html结构，用于下载了所需的assets（js、css、image等等）。
具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
下面来让我们看一看main.js和Greeter.js。Greeter.js是一个简单的函数用于输出一个打招呼的信息。main.js用于引用Greeter.js这个包，然后把打招呼的信息插入到页面上。
Greeter.js具体代码如下：
module.exports = function(){
var greet = document.createElement('div');
greet.textContent = 'Hi there and greeting';
return greet;
}
main.js具体代码如下：
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter);
第一次用webpack打包（bundle）
webpack的基本用法是webpack {entry file} {destination for bundled file}。
记住webpack需要你指定一个输入文件(entry file)，然后webpack通过这个输入文件来分析整个项目，然后打包为一个最终的文件。
如果没有把webpack全局安装，你也可通过调用node_modules中的package来实现打包，例如：
node_modules/.bin/webpack app/main.js publi/bundle.js
如果你用浏览器打开index.js你可以看到结果，如图：
Paste_Image.png
定义一个配置文件
webpack有很多高级的选项和配置，比如不同的资源利用不同的loader，可以配置不同的plugin等等。尽管可以通过命令行传参数来实现功能，但是每次打包都很复杂而且容易出错。所以更好的一种方式是写一个配置文件，这个配置文件来告诉webpack怎么来打包。
webpack.config.js内容如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + '/public',
filename: "bundle.js"
}
}
其中__dirname是一个nodejs的global变量，指代当前执行文件所在的文件夹
现在你可以执行webpack，不需要其他过多的参数，因为webpack会自动寻找webpack.config.js，读取相关的配置信息，根据配置信息来执行打包。
执行如下图：
Paste_Image.png
添加一个任务快捷命令
执行一条长长的命令，尤其没有把webpack全局安装的同学，要执行node_modules/.bin/webpack，而且可能添加一些其他的参数不如node_modules/.bin/webpack --colors等等，是不是非常不方便，下次执行的时候还可能拉掉一些参数，所以我们来建立一个执行任务命令的快捷命令 'npm start'。这个功能可以轻松的通过配置package.json来实现，如下：
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "node_modules/.bin/webpack"
},
"author": "Cássio Zen",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
其中start在package.json中是一个特别的关键字，可以通过'npm start'来执行。当然你可以创建任何你想到的命令，但是执行方式有所不同，是通过执行'npm run action'来执行其中的action是你所建立的命令。
产生source map
webpack有一个非常重要的配置参数，可以在开发的时候产生相当有帮助和重要的信息-source map。
当把所有的文件都打包到一个文件中，在浏览器中调试，是不是非常不爽，不知道在源码中的哪个文件的哪行出了bug，再加上如果有编译的过程就更苦逼了，比如es6或coffeescript转js。source map的作用就是解决这个困境的，就是在浏览器中出现问题时能够自动映射到源文件中，知道是哪个文件的哪一行出了问题。是不是非常有用？
在webpack配置object中是通过devtool来设置sourcemap的，这里有几个选择，下面我们来具体解释他们之间的区别吧
- source-map 这个是产生一个完整的全面的source map，这个选项的效果最好，但是它会降低build的效率
- cheap-module-source-map 这个是选项也是单独产生一个source map文件，但是去掉了具体列的信息，所以会降低调试的方便，却提高了build的效率。
- eval-source-map bundle源代码是利用'eval', source map完整的和bundle的结果在同一个文件中。这个有和好的调试效果，同时不影响build的效率，但是可能会有执行效率和安全的缺点，但是在开发的过程是一个很好的选择。
- cheap-module-eval-source-map 这个是build效率最高的方式，和eval-source-map相似，但是去掉了具体的列的信息。和eval-source-map相似，它有执行效率和安全性的缺点，所以不适合用在生产环境中。
正想你看到的一样，这四个选项是从上而下build速度越来越快，但是越上面的越产生没有缺点的source map。
特别在中小型的项目中，eval-source-map是一个不错的选择，它build效率比较高，同时调试比较方便，同时我们可以写一个专门用于生产环境的webpack配置文件。后面会讲到具体的应用。
这里的配置信息如下：
module.exports = {
devtool: 'eval-source-map',
entry: __dirnam + '/app/main.js',
output: {
path: __dirname + '/public',
filename: "bundle.js"
}
}
网友评论