webpack 大法好 ---- 基础概念与配置（1）

再一次见面！

Light 仍是太太太懒了，距离上一篇没啥养分的文章已通过去好多天。今天为你们介绍介绍 webpack 最基本的概念，以及简单的配置，让你能快速得搭建一个可用的 webpack 开发环境。

---

webpack的安装

webpack 运行于 node 环境，node 的安装在这就不赘述了。因为 Light 是基于 webpack2 为你们介绍的，所以 node 的版本尽可能要新（文章本就是很基础的东西，想必看文章的人也是刚接触 webpack,粗暴点，直接去装最新版）。至于 webpack 的安装大致上能够分为两种。一是安装在项目目录下，二是全局安装。

项目下安装

来，新建个文件夹，运行命令：

npm install webpack --save-dev

静静等待安装完成（要是使用 npm 安装缓慢或者失败，可使用 npm 镜像 cnpm 代替，具体问度娘）。至此，你的项目下已经可使用 webpack 了。不信？你命令行里敲个 webpack 试试！

.........敲敲敲.........

what fuck！command not found！

固然了！想直接运行 webpack 命令，你须要将 webpack 添加到系统变量啊。这就是立刻要说的 webpack 全局安装了。

全局安装

相同的，运行命令：

npm install webpack -g

..........耐心等待........

安装完成后，你的系统变量里就存在 webpack 命令了，你能够运行下试试。

.........敲敲敲.........

what fuck again！又是错误提示！

No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.

四级都过了吧！意思是说你没有配置文件啊！是的，webpack 运行时候，会第一时间去找当前目录下属于它的配置文件，咱们要是啥都不给它，它也不懂怎么输出文件啊。

最最最简单的配置

不跟你客套了，直接上代码：

var path = require('path');
module.exports = {
  entry: {
    index:'./src/index.js',
  },
  output: {
    //path 是 nodeJS 的一个基础模块，这里用来获取绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

对了，配置信息请写在项目目录下的 webpack.config.js 文件里，这是 webpack 默认状态下使用的配置文件。
好了，看代码，顾名思义， entry 选项的意思就是入口文件！做用就是告诉 webpack ，我这整个项目就是从这个 index.js 文件开始的，你也从这个文件进来看我都写了什么高大上的代码。你们都知道， webpack 是用来打包的，那既然有 entry 入口，便也有 output 出口了。以上关于 output 的配置是告诉 webpack，把打包好的文件放在 当前目录下的 dist 文件夹里，并且文件名叫作 bundle.js 。
此时你去命令行里敲下 webpack ，是否是发现项目目录下多了一个 dist 文件夹？是的话，那么恭喜你，你已经成功得使用 webpack 打包了你的项目。
到此，你应该已经大体理解了 webpack 的运行方式，它经过配置读取了入口文件，而后根据入口文件的代码，调用你项目中运用到的依赖模块，并最终将全部的模块打包并输出出来。简单的原理理解就是这样，但是这仍是皮毛啊，你要不是看 Light 的文章，去看别人的教程，或者官方文档，我相信这些你三四分钟就掌握了。

webpack 是根据你提供的代码去搞一些事情，也就是说，它只看得懂你写的 js 啊。它并不懂你写的 css、scss、ts...等等非 JS 文件，然而 webpack 很诚恳得把每一个文件都做为模块，你要是用到了，它就会帮你去打包，至于对错，它真的不 care 。
那么其余的非 JS 文件，webpack 要怎么去解析呢？接下来就是 webpack 的另外一个重要概念：Loaders。

Loaders 加载器

Loader--加载器，既然叫这个名字，能干吗还不知道么？加载文件时候都要通过它的层层把关，换句话说，它就是帮 webpack 看门的。项目中你可能用到各类各样的模块，各类各样的文件，每个文件都会通过这个 Loader，而它会根据你提供的配置，根据要加载的文件后缀，调用相关的加载器去加载文件。接下来举一个栗子，如何在你的项目中使用 ES6 。

关注前端发展的同窗都知晓，ES6 做为新一代的 js 标准，愈来愈受到开发者们的关注，也愈来愈多的人使用 ES6 去开发项目。然而，理想很丰满，浏览器兼容这个现实难题也至关饱满。市场上的浏览器大佬们，并不是都完美支持 ES6 ，也就是说你拿 ES6 的代码是交不了差的。但是时代潮流不能被这些大佬给克制住了啊，因而，万能的社区为咱们提供了 Babel 这一神器。它能够将 ES6 语法转化为 ES5 ,从而解决咱们的后顾之忧，能够大胆得使用 ES6。
关于 ES6 的介绍，推荐你们去看阮一峰老师的ECMAScript 6 入门，对于刚接触的人来讲是颇有帮助的。

webpack里，如何使用 ES6？答案就是 Loader。
首先安装 babel：

npm install --save-dev babel-loader babel-core babel-preset-es2015

接着就是去告诉 webpack ，你有 Loader 的。仍是 webpack.config.js 。

var path = require('path');
module.exports = {
  entry: {
    index:'./src/index.js',
  },
  output: {
    //path 是 nodeJS 的一个基础模块，这里用来获取绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" 
      }
    ]
  }
}

经过以上配置，当 webpack 中须要打包 JS 文件时，就会去调用 babel-loader 来进行解析（webpack1 的时候能够写 loader: "babel"，2.0的版本开始，必须写 "babel-loader"）。从而，你用 ES6 语法来写，输出的文件会被转为 ES5。固然，想要正确使用 babel，你还须要对 babel 进行配置。很简单，在项目目录下新建一个 .babelrc 文件，里头写 JSON 格式的配置信息。

{
  "presets": ["es2015"]
}

除了 JS 文件，其余文件类型，例如 css、scss、jpg、ts、vue......等等，都有相应的 Loader 。须要用的时候就配置相应的加载器便可。前端是个五彩缤纷的世界，生存的王道就是要学会适应变化。下面就简单列举一些经常使用 Loader。

loaders: [
  { 
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader" 
  },
  {
    test: /\.css$/, 
    loader: "style-loader!css-loader!postcss-loader"
  },{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader?limit=2048'
  }
]

上诉若是有不懂的，欢迎留言。介绍完 Loaders ，接下来介绍 webpack 另一个重要概念：Plugins

Plugins 插件

plugin的目的其实就是填补 loader 的不足。固然，它也是 webpack 功能可配置化的基础。先看代码：

plugins:[
    //代码压缩
    new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true
      }
    })
  ]

这里咱们使用了 webpack 自带的代码压缩插件。能够注意到，因为能够给插件传入参数，所以插件的调用须要用 new 来声明。此时运行 webpack，最终打包出来的代码是压缩好的。Light 能力有限，至于如何本身去写 webpack 插件，在这就不聊了！我也不会啊！

下面是完整的配置文件：

var path = require('path');
var webpack = require('webpack');
module.exports = {
  entry: {
    index:'./src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders:[{
      test: /\.css$/, 
      loader: "style-loader!css-loader!postcss-loader"
    },{
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'url-loader?limit=2048'
    },{
      test: /\.js$/,
      exclude: /node_modules/, 
      loader: "babel-loader" 
    }]
  },
  plugins:[
    //代码压缩
    new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true
      }
    })
  ]
}

也能够访问 git 来获取这个最简单的 webpack 开发环境：https://github.com/rcg1994/we...

ok！今天到此为止，若是你正好看到这篇文章，又正好看到这句话，那咱就交个朋友吧。有任何问题均可以在文末留言，或者加我微信。一块儿交流才能进步。下次谈谈 webpack 热更新或者其余能想到的。最后献上我的微信号：