webpack快速入门（二）：使用入门
继续之前请确认你已经安装了nodejs
安装、初始化：
然后找个目录新建名为webpack-demo的文件夹，然后在命令行下进入该目录，执行以下命令：
npm init -y
npm install --save-dev webpack
一个初始化命令，会在当前目录下生成一个package.json的配置文件
一个本地安装webpack的命令
目录内的结构如下：（以/开头的为目录）
webpack-demo |- package.json + |- index.html + |- /src + |- index.js
接下来在src/index.js中写一个测试方法：
function component() { var element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
不解释了，会点js应该都可以看懂
index.html的内容如下：
<html> <head> <title>Getting Started</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./src/index.js"></script> </body> </html>
没什么特别的，引用了lodash库和我们自己写的index.js文件（此时还没有用webpack来管理依赖，所以我们
通过script标签来自己导入需要的库文件）。
到此为止就写完了，运行一下html文件，应该没什么意外，你应该可以看到页面上有个DIV，DIV的内容是：
Hello webpack
这种方式其实也是我较早时候写js的方式，需要什么库，自己写或者自己去下载，然后通过script标签引用
这种方式有如下几个缺点：
- 需要在html文件显示引入依赖脚本
- 如果依赖丢失或者引入顺序错误，会早晨程序运行错误
- 如果导入依赖库，但是没使用到。浏览器依然会加载这个库，造成请求流量增大，延缓页面加载速度
使用webpack改造：
基于上述三个缺点，使用webpack来改造之前的项目：
改造后的目录结构如下：
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
其中蓝色标注的为新加的目录和文件，红色标注的为删除掉的文件
也就是删掉了之前webpack-demo目录下的index.html，新建了dist目录，并在该目录下新建index.html
刚才在页面中引入了lodash库（我们先不管它干嘛用的，主要目的是webpack），现在在命令行中，
首先定位webpack-demo目录下，然后执行：
npm install --save lodash
此命令将lodash安装在本地，接着修改src目录下的index.js文件修改后的js如下：
import _ from 'lodash'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
和刚开始的比较，第一行多了一个import导入语句，把lodash导入为 _变量，下边就能直接使用了
至于lodash哪来的？为什么能导入，看上边npm install那行在干嘛？不就是在安装lodash吗，安装了当然能导入。
最后修改dist文件夹下的index.html，内容为：
<html> <head> <title>Getting Started</title> </head> <body> <script src="bundle.js"></script> </body> </html>
相比于之前的index.html，这里少了lodash的script引用标签，而且连我们自己写的index.js文件的引入都没有了
但是多了一个bundle.js，这是什么？哪里来的。不要着急，会明白的，先往下走
在本文开头你执行npm install --save-dev执行本地安装的时候，如果你留意一下，会看到当前目录下生成了
一个文件夹叫做：node_modules，打开可以看到N多的文件夹和文件， 我们的项目依赖可以在这里找到
所以我们安装的webpack也在这里，现在代码写好了，让我们使用webpack来执行打包：
./node_modules/.bin/webpack src/index.js dist/bundle.js
这句话的意思是调用当前目录下的node_modules目录下的bin目录下的webpack命令，webpack后边的就是命令参数了
大概意思就是打包src目录下的index.js文件到dist目录下，打包后的文件为bundle.js，就是这个意思了。
所以现在想想，index.html里引入的bundle.js哪来的？就是这里了，引入webpack打包后的文件。
如果你执行这个命令报错比如command not found，请确认两点，第一webpack安装成功了没有
第二，看看你当前所在目录，路径对不对
如果没什么问题，稍等片刻你应该在控制台会看到类似这样的输出：
Hash: ff6c1d39b26f89b3b7bb Version: webpack 3.1.4 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] ./src/index.js 278 bytes {0} [built]
好了，如果你看到了这个，那么恭喜你，你的首个webpack打包已经成功了。马上来看看吧
打开dist下的index.html文件，你应该能看到和之前一样的效果，页面显示：Hello webpack
使用配置文件：
刚才打包我们输入了一长串的命令，容易错，还不好记，有没有什么办法能简化一下？
有的，就是使用配置文件，再次改造一下，在webpack-demo目录下新建webpack.config.js
内容如下：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
保存文件，然后控制台执行：
./node_modules/.bin/webpack --config webpack.config.js
会发现打包依然成功了，和之前的打包效果一样，不过这次我们没有指定打包的文件和打包后的存放路径这些
这些通过配置放在了webpack.config.js中。
entry指定了打包的入口文件，output指定了打包后的相关参数，filename是打包后的文件名，path是打包后的存放路径
上边的命令其实还能简化，可以直接输入：
./node_modules/.bin/webpack
也能打包成功，因为webpack打包默认会寻找一个名webpack.config.js的文件，所以不需要显示指定，之所以使用--config参数
是想说明如果我们自定义配置文件不叫默认的名字：webpack.config.js，那么可以通过--config 自定义文件名的形式来打包。
再次简化，使用npm脚本：
现在第一个webpack程序已经跑起来了，但是如果你是个合格的程序员，你会想，我X，这么麻烦
每次打包还要命令行输入命令？还要指定打包文件？还要指定打包后的文件和目录.....，简直不能忍
所以我们来简化一下，当个合格的程序员（懒）：
我们在开头时执行了npm init这个命令，当时说了会生成一个package.json，到现在还没用上呢，现在就来用用
{ "scripts": { "build": "webpack" } }
在scripts下加上"build": "webpack"的字样，就可以了，意思就是新建了一个脚本命令，名字为build，对应要执行的命令为webpack
好了，就这么简单，保存一下，然后回到我们的webpack-demo目录下，执行npm run build看看效果吧，如果你跟着一路坐下来，
应该能看到上面打包成功的那些信息。
这里其实就是用一个名字为build的脚本命令代替了./node_modules./bin/webpack......这一长串的命令。
到此为止，下一篇：资源管理
