webpack2入門概念

webpack是一種JavaScript應用模塊化打包工具，它配置起來簡單易上手，所以不少企業工程化代碼都使用它來打包。在具體介紹如何使用webpack以前，先來介紹下webpack的四個核心概念。

Entry

Entry是webpack的入口，簡單來說，你能夠想象成webpack會爲JavaScript應用的依賴關係維護一個複雜的圖，而entry則是這個圖的入口，它會告訴webpack從哪裏開始打包你的項目，而且打包什麼（where and what）。 
Entry在webpack的配置文件中經過entry屬性定義，一個最簡單的定義以下：

module.exports = {
  entry: __dirname+'/index.js'
};

　　

__dirname是項目的根目錄

Output

經過entry你已經能夠開始打包模塊化的JavaScript項目，可是webpack還不知道如何打包，例如打包出來的文件如何命名，打包出來的文件放在哪裏等等。 
上述問題都經過webpack配置文件的output屬性來定義，其語法以下

module.exports = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  }
};

　　

webpack在即將開始打包的時候讀取上面的配置文件，從根目錄下的index.js開始打包，打包出來的文件命名爲bundle.js，並將其放在根目錄的dist文件夾裏。

Loaders

webpack會將JavaScript項目裏的文件所有視爲模塊（module），可是webpack自身只能識別js，所以不一樣的文件(.css, .html, .styl, .jpeg, etc.)須要不一樣的解析器。Loaders在webpack中的做用就是將JavaScript項目中的不一樣文件解析成模塊，以便於不一樣文件可以在項目中統一處理。 
loaders在webpack配置文件中語法規則以下：

const config = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'}
    ]
  }
};

module.exports = config;

　　

在上面的配置文件中咱們定義了rules屬性，它有兩個子屬性.test和.use。值得一提的是，當你定義rules的時候，必須定義在module.rules下面而非直接定義rules，不然webpack的語法檢查會報錯。 
新增的rules規則告訴了編譯程序，當碰到以.css結尾的文件而且是經過require或者import引入的時候，首先使用css-loader對文件進行解析，以後將解析完成的文件視爲標準化模塊統一處理。

• *-loader須要先安裝纔可以使用
• 此處loaders語法規則爲webpack2.+的語法規則，老版本的語法規則不一樣。

Plugins

配置了以上三個屬性以後，webpack已經能夠對簡單項目進行正常打包了。可是對於打包過程當中的不一樣需求，webpack提供了Plugins功能，它能夠知足不少個性化需求。例如，我想要對webpack打包的文件進行壓縮，那麼能夠引入具備壓縮功能的插件，代碼以下。

onst webpack = require('webpack'); 

const config = {
  entry: __dirname+'/index.js',
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()  ]
};

module.exports = config; 

　　爲了使用相應的插件，咱們須要現將插件進行require，因爲壓縮是webpack內部的插件所以直接require就能夠，若是是一些第三方插件，須要先安裝，安裝以後再經過require引入。