摘要：我們也可以不用在命令行里面輸入，因為我們可能以后會查詢更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進度條和，沒有實際意義，然后在命令行輸入就可以默認使用進行打包了。更具體的就請查看一下官方文檔了，畢竟篇幅不能太長。

網上有很多webpack的介紹，也有不少的視頻，但是不少人看到應該還是不是很了解webpack里面到底是講什么，而且報錯了之后也是不知所措

那么這里我作為一個工具小白就闡述一下小白面前應該怎么學習webpack吧，當你看完之后，我相信對其他工具也會有更深的了解

在我的文章里主要講解：

webpack基本介紹及安裝

webpack基本配置和配置文件

webpack在項目中如何自動生成html文件

強大的loader加載器

還有更多的功能我也會在文中提及到

附：webpack官網地址[英文官網][中文官網]

Webpack是時下最流行的模塊打包器

它的主要任務就是將各種格式的JavaScript代碼，甚至是靜態文件進行分析、壓縮、合并、打包，最后生成瀏覽器支持的代碼

用一張圖片簡單表示一下

特點：

代碼拆分方案：webpack可以將應用代碼拆分成多個塊，每個塊包含一個或多個模塊，塊可以按需異步加載，極大提升大規模單頁應用的初始加載速度

智能的靜態分析：webpack的智能解析器幾乎可以處理任何第三方庫

Loader加載器：webpack只能處理原生js模塊，但是loader可以將各種資源轉換為js模塊

plugin插件：webpack有功能豐富的插件系統，滿足各種開發需求

快速運行：webpack 使用異步 I/O 和多級緩存提高運行效率，使得它能夠快速增量編譯

綜合來說webpack綜合了目前網絡上的打包工具的優點，但是也要合理使用，不然也會適得其反

第一步，首先得安裝好node.js和npm

npm是前端開發者必備的下載工具吧，如果你連這個也沒有安裝的話，那么你就得快點安裝了，這里附一個gulp打包工具的教程，這里第一和第二步有node.js和npm的安裝具體教程，如果你沒有安裝，那就得快點入門了。

第二步，進入webpack世界

首先，新建一個webpack-test文件夾作為你的項目目錄

然后，用npm初始化你的項目，進入cmd，切換到你的目錄下，輸入：

npm init

然后會出現一大堆輸入的東西，這里我們全部選擇默認輸入enter就好了

輸入完了之后，它會提示你輸入的信息給你核對，按下確認之后，就會在你的項目目錄下生成了package.json

下一步，我們在我們的文件夾里面安裝一下webpack吧，在項目目錄下的cmd輸入

npm install webpack --save-dev

這就安裝好了，這里就給大家來一個小Demo，讓大家更加了解webpack的打包方式吧，如果已經有基礎的同學可以跳過這里

在webpack-test下新建一個hello.js，輸入下面的代碼

//自定義一個函數
function hello (str) {
    alert(str);
}

然后在命令行輸入

webpack hello.js hello.bundle.js

這里的意思是用webpack文件將hello.js打包成hello.bundle.js輸出在根目錄下，成功之后在根目錄下就會出現hello.bundle.js文件

然后介紹一下我們打包成功的各個東西的含義吧

然后再在根目錄下新建一個world.js，在文件里輸入

//隨便自定義一個函數
function world () {

}

再去修改hello.js成為

require("./world.js")   //連接到另外一個函數塊

//自定義一個函數
function hello (str) {
    alert(str);
}

再輸入一下

webpack hello.js hello.bundle.js

進行打包之后就會發現，打包成功里面hello.js的chunks序列號是0，world.js的chunks序列號是1，然后在hello.bundle.js看到他們的序列號也是這樣。

那么如果我想也把css文件也打包進去應該怎么辦呢？

我們再在根目錄下新建一個style.css，在里面簡單輸入

html, body {
    padding: 0;
    margin: 0;
}

然后這里我們需要下載兩個loaders加載器，為什么要下載loaders加載器呢，你也可以想一想，css文件和js文件畢竟不一樣，如果在hello.js引入style.css那么肯定會報錯，這個時候，我們需要一種東西幫忙加載我們的css成js

接下來我們下載兩個loaders加載器，后面說一下這兩個的作用，在命令行輸入

npm install css-loader style-loader

然后把hello.js改成

require("./world.js")   //連接到另外一個函數塊
require("css-loader!./style.css")   //利用css-loader加載器解析css文件使之可讀

//自定義一個函數
function hello (str) {
    alert(str);
}

再在輸入一下指令，打包好了后了可以觀察hello.bundle.js里面就多了css文件里面的內容

這時候，你也許會覺得，我說了那么多，那么，怎么把這些東西用到我們的頁面中嗎？下面就會說到

在我們的跟目錄下新建一個index.html，加入下面內容

再把我們的style.css改成

html, body {
    padding: 0;
    margin: 0;
}

body {
    color: red;
}

再把我們的hello.js改成

require("./world.js")   //連接到另外一個函數塊
require("style-loader!css-loader!./style.css")   
//利用css-loader加載器解析再用style-loader解析css文件使之可讀

//自定義一個函數
function hello (str) {
    alert(str);
}

hello("hello webpack");

然后我們再打包運行一下,就可以在頁面看到我們的結果，這時候如果你細心，就會發現我們在css-loader前面加了個style-loader，如果你不加的話，你就會發現你的頁面打開后不是紅色的，因為還沒經過style-loader的解析，當然這只是一種方法，還有其他方法可以自尋在官網看看文檔。

如果你覺得每次修改之后打包也很麻煩，這時候我們的watch就有作用了，你可以在打包后面加入，例如輸入

webpack hello.js hello.bundle.js --watch

然后下次修改就不用在進行輸入打包代碼了，這上面也就是簡單的介紹了一下我們的webpack是怎么從一個文件鏈接到很多文件的。

這里就是我們最重要的一個部分了，如果你看過很多webpack打包后的開源項目之后，你就會發現，有些時候你不知道從哪里看起，那就從配置文件開始看起來吧

相信你應該也在不少的文章中看到有關于配置文件的說法的吧，畢竟配置文件也算是最重要的一部分了，這里也可以推薦你看一篇我覺得還不錯的webpack入門

不過我如果你沒有基礎的話，建議繼續看下我的再去看那一篇，收獲會更大

首先，我們新建一個項目webpack-demo，按照我上面教程文章里面下載安裝好webpack，安裝完了之后，我們需要新建幾個文件以及文件夾，如下面所示

然后在index.html輸入

在webpack.config.js也就是webpack的配置文件里面輸入

// webpack.config.js
module.exports = {
  entry:"./src/script/main.js", //我們的入口文件，相當于前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后，把內容輸出到這個文件夾上,也可以寫成"./dist/js"，
    但是這樣放在服務器上路徑可能會出錯，所以加上__dirname*/
    filename: "bundle.js" //輸入到上面path文件夾里面的bundle.js，沒有則自動新建
  }
}

再在main.js里面輸入

//main.js
function helloworld () {
    alert("hello world");
}

helloworld();

在命令行輸入webpack,就將我們的入口文件及其鏈接文件（這里還沒有）打包輸出在dist/js目錄下面的bundle.js文件了。

這就是我們的配置文件的最簡單的用法，以后我們還可以在里面配置很多loaders，甚至更復雜的打包，下面一步步說明吧。

我們也可以不用在命令行里面輸入webpack，因為我們可能以后會查詢更多東西，因此我們可以，在package.json的script里面加入：

"webpack":"webpack --config webpack.config.js --progress --color" 

這里的--progress和--color只是為了輸出進度條和color，沒有實際意義，然后在命令行輸入npm run webpack就可以默認使用webpack進行打包了。

還有更多關于我們入口文件和輸出文件的介紹，我建議看一下慕課網的這個視頻會更加了解webpack配置文件

在說這個之前，我們為什么要自動生成html頁面？我們直接用index.html不就可以了？但是實際項目往往是有多個頁面的，不過這里我們就簡單介紹一個頁面怎么自動生成，多個也是同樣的原理，我們先來安裝一個插件html-webpack-plugin，我們在命令行輸入：

npm install html-webpack-plugin --save-dev

然后把我們的webpack.config.js里面修改成

// webpack.config.js
var htmlWebpackPlugin  = require("html-webpack-plugin")//引入我們的插件

module.exports = {
  entry: {
      main: "./src/script/main.js",
  }, //我們的入口文件，相當于前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后，把內容輸出到這個文件夾上,也可以寫成"./dist/js"，
    但是這樣放在服務器上路徑可能會出錯，所以加上__dirname*/
    filename: "[name]-[hash].js" //輸入到上面path文件夾里面的bundle.js，沒有則自動新建
  },
  plugins:[
      new htmlWebpackPlugin()  //對插件進行實例化
  ]
}

然后，在我們的dist下面就有了一個項目自動生成的inex.html文件了

但是如果你細心就可以發現這個時候的index.html和我們原來的index.html沒有任何的聯系，這時候我們需要修改我們配置文件中的插件實例化那里修改成

  plugins:[
      new htmlWebpackPlugin({
          template: "index.html"
      })  //對插件進行實例化
  ]

再打包一次之后，就會發現生成的dist目錄下面的index.html文件就會綁定了其他js文件。更具體的就請查看一下官方文檔了，畢竟篇幅不能太長。

前面我們也有所提到我們的loader加載器，但是實際中是怎么樣的呢，這里我圍繞我們項目經常利用babel-loader轉換ES6

Loaders需要多帶帶安裝并且需要在webpack.config.js下的modules關鍵字下進行配置，Loaders的配置選項包括以下幾方面：

test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）

loader：loader的名稱（必須）

include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

query：為loaders提供額外的設置選項（可選）

首先，新建一個工程webpack-loader吧，然后將項目用npm初始化后，再在項目下下載webpack，然后構建好下面的這些目錄

用npm下載一下html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

修改我們的index.html成

layer.html

    
this is a layer

layer.js

// import tpl from "./layer.html"

function layer () {
    return {
        name: "layer",
        tpl: tpl
    }
}

export default layer;

app.js

//app.js
import layer from "./component/layer/layer.js";
//導入layer

//使用ES6語法
const App = function () {
    console.log(layer);
}

new App()

Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯幫你達到以下目的：

下一代的JavaScript標準（ES6，ES7），這些標準目前并未被當前的瀏覽器完全的支持；

使用基于JavaScript進行了拓展的語言，比如React的JSX

首先，我們先安裝Babel在命令行輸入

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

再安裝一下babel中的latest這里我們需要用到

npm install --save-dev babel-preset-latest

修改我們的配置文件webpack.config.js

var htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
      main: "./src/app.js",
  }, //我們的入口文件，相當于前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后，把內容輸出到這個文件夾上,也可以寫成"./dist/js"，
    但是這樣放在服務器上路徑可能會出錯，所以加上__dirname*/
    filename: "bundle.js" //輸入到上面path文件夾里面的bundle.js，沒有則自動新建
  },
  module: {
    loaders: [
        {
            test: /.js$/, //匹配所有的js文件
            loader: "babel-loader", //引用lbabel插件           
        }

    ]
  },
  plugins: [
      new htmlWebpackPlugin({
          filename:"index.html",
          template:"index.html",
          inject:"body" //將script標簽加載進body
      })
  ]
}

再在我們的package.json下加入

{
    //...
    "babel": {
        "presets": ["latest"]
    },
    //...
}

在命令行輸入webpack，就可以在我們的dist目錄下面的js里面看到我們的配置文件已經有了這些文件

其他加載器css,less,sass等的原理也是一樣，這里就不一一介紹了

有興趣的話，可以繼續看看慕課網的視頻，在下也是受人啟發。

還有更多的加載器可以在我們的webpack官網進行查詢，這里我就不進行多解釋了