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 熱更新或者其餘能想到的。最後獻上我的微信號：