引言&目标

webpack可以帮助我们打包我们的代码。

什么是打包

打包主要是针对前端开发来说的，打包主要干了下面三件事：

第一是帮助我们合并文件：在前端开发当中，我们需要编写多个js文件，有的时候还需要引用第三方的js文件，webpack可以吧这些js文件合并成一个js文件，这样我们在页面当中就可以只写一个

语句，就可以加载到整个站点所需要的js代码了。

当然对于css文件，webpack也是可以进行合并的。

第二是能够帮助我们压缩代码：webpack在合并js文件之后，会自动的吧我们的js文件中的多余的空格去掉，把比较长的变量名改成短的名称，把注释去掉等等等等，从而能够让我们的代码身轻如燕，浏览器在加载的时候，更加的心情舒畅。

第三，也是最总要的一点，就是能够帮助进行模块化编程，具体来说呢，就是我们可以使用es6中给我们提供的模块加载机制，可以使用require、export、import这些高大上的语法。

webpack如何使用

首先是吧webpakc安装一下，来到webpack的官网,点击documentation然后来到安装页面，这里安装的话，需要执行

npm install webpack -g

然后webpack会以迅雷不及掩耳盗铃之势被安装到全局目录当中。

那接下来，我们使用webpack打包两个js文件到一个js文件中。

我们首先创建一个目录，webpack，在这里我们分别创建两个js文件，file1.js和file2.js，然后我们使用atom编辑起来进行编辑，对于file1，我们导出一个变量

'use strict';
exports.name = 'zhangsan';

然后对于file2.js文件，我们来引用file1，并将file1中的名字显示到浏览器中

'use strict';
const file1 = require('./file1.js');
document.write(file1.name);

好现在两个js文件都准备好了，然后我们尝试着将两个文件打包成一个文件

webpack file2.js bundle.js

好的看见几个绿色单词，说明我们已经打包好了，那这里有几个问题要处理一下。

首先，我们使用webpack打包的时候时想打包file1.js和file2.js，为什么这里我只写了一个file2.js文件呢?

这是因为，在file2中我们使用require引用了file1文件，当webpack打包file2.js文件的时候，它突然发现，你还require了file1，那么就会把file1合并到file2当中，所以这边我们只需要写file2就可以了。

第二个问题，就是这个bundle.js是什么？ bundle是包裹的意思，bundle.js就是指打包后的代码，长什么样子呢，我们可以使用atom查看一下，可以看到，打包后的代码，看不懂，但是会给人感觉很厉害的感觉。

有了bundle.js文件后，我们就可以在html文件中使用这个js文件查看一下效果了。 创建一个index.html文件，然后在body中引用bundle.js文件，当我们在浏览器中加载index.html文件的时候，可以看到，zhangsan被成功的打印了出来。

然后我们尝试，在讲一个css文件打包到bundle.js文件当中去。

我们编写一个css文件style1.css

body {
  background: #ff0000;
}

然后我们再一次的打包，可以看到出现了一堆错误，为什么呢？

webpack的工作原理

webpack在打包的时候，可以分为两部分，一部分是合并文件，另外一部分是加载解析文件【此处应有图】，不同的文件需要使用不同的加载器来进行加载和解析，然后再由webpack来进行统一的打包。

那有的同学可能会问，为什么刚刚打包两个js文件的时候没有使用加载器，也成功了了，原因是当我们安装了webpack的时候，它默认会自带一个js文件的加载器，所以刚刚打包js文件成功了。

现在出现了一个css文件，当webpack打包的时候，没有找到合适的加载器去加载css文件，所以我们可以看到，在错误信息中出现了 You may need an appropriate loader to handle this file type.，没有办法去正确的加载css文件。

那么我么所要做的事情就是安装合适的css加载器，在这里我们小安装两个加载器

npm install css-loader style-loader;

然后我们还需要特别的告诉webpack，当你在加载css文件的时候，需要使用刚刚安装的加载器，怎么做呢？

我们只需要在require的时候，特别的标注一下

require('!style!css!./style1.css');

然后再一次的打包。

可以看到，出现了磬人心脾的绿色小字，说明我们打包成功了。

然后我们来看一下效果，页面变红了，说明css文件生效了。

如何让加载css文件更优雅

为了使用合适的loader去加载css文件，我们写了require('!style!css!./style1.css');，这种代码看起来非常的不优雅，我们可以使用模块绑定的方式，来简化这种写法，具体来说呢，是是先将require里面的多余代码先去掉，这个时候打包肯定报错，为了不报错，那么我们需要告诉webpack当遇到css文件的时候，使用何种加载器：

webpack file2.js bundle.js --module-bind 'css=style!css'

其中，--module-bind css=style!css就是告诉webpack，使用css-loader和style-loader去加载后缀名为css的文件

可以看到，也是可以打包成功的。

如何避免每次都写模块绑定

如果使用模块绑定的话，那么我们需要每次打包的时候，都要敲模块绑定的命令，如果所需要的加载器比较多，那么这个模块绑定的命令也会很长，很不好看。

怎么可以让命令更加的简洁一点呢？

我们可以使用webpack给我们提供的配置文件。

具体来说呢，我们首先创建一个webpack.config.js文件，

module.exports = {
  entry: './file2.js',
  output: {
    path: __dirname,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}

然后再次运行一下打包命令，注意这个时候我们就不需要模绑定命令了。

成功了，是不是非常的优雅？

es6加载器

那么到目前为止，还有一件事情我们需要处理一下，就是，我们的js使用的还是es5的语法，如果能够使用es6的语法的话，是不是更加的优雅一点呢？

比如在file1.js文件中，我们可以通过exprot来导出name变量。

const name = 'zhangsan';
export {name};

然后在file2中，我们使用import来导入文件

import {name} from './file1';
import './style1.css';
document.write(name);

这个时候使用webpack来打包，虽然不会报错，但是打包的bundle.js文件中，其实并没有正真的的吧我们需要的file1.js和style1.css文件合并到里面去，为什么会出现这种情况呢？

因为webpack在打包的时候使用的是es5的语法，对于import这个关键字来说，压根就不认识，也就没有办法去加载相应的文件了，那怎么办呢？

我们刚刚说webpack使用的是加载器去加载文件，对于使用了es6语法的fiel1和file2文件来说，我们可以使用特别针对于es6文件的加载器来进行加载和转换，就可以了。

那这边我们需要做两件事情，首先安装es6加载器和转换规则

npm install babel-loader babel-preset-es2015

第二部，我们需要在配置文件中配置，告诉webpack在加载使用es6语法的js文件的时候，使用何种加载器

{test: /\.js$/, loader: 'babel', query: {presets: 'es2015'}},

然后我们再进行打包。打包完成浏览器预览index.html效果可以看到，运行的很完美。此文章到这里就暂告一段落。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » webpack入门教程之渐入佳境