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

摘要：不信你命令行里敲个试试敲敲敲当然了想直接运行命令，你需要将添加到系统变量啊。全局安装相同的，运行命令耐心等待安装完成后，你的系统变量里就存在命令了，你可以运行下试试。上诉如果有不懂的，欢迎留言。

Light 还是太太太懒了，距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 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。

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

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 热更新或者其他能想到的。最后献上个人微信号：