摘要：不信你命令行里敲個試試敲敲敲當(dāng)然了想直接運行命令，你需要將添加到系統(tǒng)變量啊。全局安裝相同的，運行命令耐心等待安裝完成后，你的系統(tǒng)變量里就存在命令了，你可以運行下試試。上訴如果有不懂的，歡迎留言。

Light 還是太太太懶了，距離上一篇沒啥營養(yǎng)的文章已經(jīng)過去好多天。今天為大家介紹介紹 webpack 最基本的概念，以及簡單的配置，讓你能快速得搭建一個可用的 webpack 開發(fā)環(huán)境。

webpack 運行于 node 環(huán)境，node 的安裝在這就不贅述了。由于 Light 是基于 webpack2 為大家介紹的，因此 node 的版本盡量要新（文章本就是很基礎(chǔ)的東西，想必看文章的人也是剛接觸 webpack,粗暴點，直接去裝最新版）。至于 webpack 的安裝大體上可以分為兩種。一是安裝在項目目錄下，二是全局安裝。

來，新建個文件夾，運行命令：

npm install webpack --save-dev

靜靜等待安裝完成（要是使用 npm 安裝緩慢或者失敗，可以使用 npm 鏡像 cnpm 代替，具體問度娘）。至此，你的項目下已經(jīng)可以使用 webpack 了。不信？你命令行里敲個 webpack 試試！

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

what fuck！command not found！

當(dāng)然了！想直接運行 webpack 命令，你需要將 webpack 添加到系統(tǒng)變量啊。這就是馬上要說的 webpack 全局安裝了。

相同的，運行命令：

npm install webpack -g

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

安裝完成后，你的系統(tǒng)變量里就存在 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 運行時候，會第一時間去找當(dāng)前目錄下屬于它的配置文件，我們要是啥都不給它，它也不懂怎么輸出文件啊。

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

var path = require("path");
module.exports = {
  entry: {
    index:"./src/index.js",
  },
  output: {
    //path 是 nodeJS 的一個基礎(chǔ)模塊，這里用來獲取絕對路徑
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
}

對了，配置信息請寫在項目目錄下的 webpack.config.js 文件里，這是 webpack 默認(rèn)狀態(tài)下使用的配置文件。
好了，看代碼，顧名思義， entry 選項的意思就是入口文件！作用就是告訴 webpack ，我這整個項目就是從這個 index.js 文件開始的，你也從這個文件進(jìn)來看我都寫了什么高大上的代碼。大家都知道， webpack 是用來打包的，那既然有 entry 入口，便也有 output 出口了。以上關(guān)于 output 的配置是告訴 webpack，把打包好的文件放在 當(dāng)前目錄下的 dist 文件夾里，而且文件名叫做 bundle.js 。
此時你去命令行里敲下 webpack ，是不是發(fā)現(xiàn)項目目錄下多了一個 dist 文件夾？是的話，那么恭喜你，你已經(jīng)成功得使用 webpack 打包了你的項目。
到此，你應(yīng)該已經(jīng)大致理解了 webpack 的運行方式，它通過配置讀取了入口文件，然后根據(jù)入口文件的代碼，調(diào)用你項目中運用到的依賴模塊，并最終將所有的模塊打包并輸出出來。簡單的原理理解就是這樣，可是這還是皮毛啊，你要不是看 Light 的文章，去看別人的教程，或者官方文檔，我相信這些你三四分鐘就掌握了。

webpack 是根據(jù)你提供的代碼去搞一些事情，也就是說，它只看得懂你寫的 js 啊。它并不懂你寫的 css、scss、ts...等等非 JS 文件，然而 webpack 很誠懇得把每個文件都作為模塊，你要是用到了，它就會幫你去打包，至于對錯，它真的不 care 。
那么其他的非 JS 文件，webpack 要怎么去解析呢？接下來就是 webpack 的另一個重要概念：Loaders。

Loader--加載器，既然叫這個名字，能干嘛還不知道么？加載文件時候都要經(jīng)過它的層層把關(guān)，換句話說，它就是幫 webpack 看門的。項目中你可能用到各種各樣的模塊，各種各樣的文件，每一個文件都會經(jīng)過這個 Loader，而它會根據(jù)你提供的配置，根據(jù)要加載的文件后綴，調(diào)用相關(guān)的加載器去加載文件。接下來舉一個栗子，如何在你的項目中使用 ES6 。

關(guān)注前端發(fā)展的同學(xué)都知曉，ES6 作為新一代的 js 標(biāo)準(zhǔn)，越來越受到開發(fā)者們的關(guān)注，也越來越多的人使用 ES6 去開發(fā)項目。然而，理想很豐滿，瀏覽器兼容這個現(xiàn)實難題也相當(dāng)飽滿。市場上的瀏覽器大佬們，并非都完美支持 ES6 ，也就是說你拿 ES6 的代碼是交不了差的?？墒菚r代潮流不能被這些大佬給克制住了啊，于是，萬能的社區(qū)為我們提供了 Babel 這一神器。它可以將 ES6 語法轉(zhuǎn)化為 ES5 ,從而解決我們的后顧之憂，可以大膽得使用 ES6。
關(guān)于 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 的一個基礎(chǔ)模塊，這里用來獲取絕對路徑
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { 
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader" 
      }
    ]
  }
}

通過以上配置，當(dāng) webpack 中需要打包 JS 文件時，就會去調(diào)用 babel-loader 來進(jìn)行解析（webpack1 的時候可以寫 loader: "babel"，2.0的版本開始，必須寫 "babel-loader"）。從而，你用 ES6 語法來寫，輸出的文件會被轉(zhuǎn)為 ES5。當(dāng)然，想要正確使用 babel，你還需要對 babel 進(jìn)行配置。很簡單，在項目目錄下新建一個 .babelrc 文件，里頭寫 JSON 格式的配置信息。

{
  "presets": ["es2015"]
}

除了 JS 文件，其他文件類型，例如 css、scss、jpg、ts、vue......等等，都有相應(yīng)的 Loader 。需要用的時候就配置相應(yīng)的加載器即可。前端是個五彩繽紛的世界，生存的王道就是要學(xué)會適應(yīng)變化。下面就簡單列舉一些常用 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的目的其實就是填補(bǔ) loader 的不足。當(dāng)然，它也是 webpack 功能可配置化的基礎(chǔ)。先看代碼：

  plugins:[
    //代碼壓縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
          warnings: false,
          drop_console: true,
          drop_debugger: true
      }
    })
  ]

這里我們使用了 webpack 自帶的代碼壓縮插件?？梢宰⒁獾剑捎诳梢越o插件傳入?yún)?shù)，因此插件的調(diào)用需要用 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 開發(fā)環(huán)境：https://github.com/rcg1994/we...

ok！今天到此為止，如果你正好看到這篇文章，又正好看到這句話，那咱就交個朋友吧。有任何問題都可以在文末留言，或者加我微信。一起交流才能進(jìn)步。下次談?wù)?webpack 熱更新或者其他能想到的。最后獻(xiàn)上個人微信號：