摘要：我們也可以不用在命令行里面輸入，因?yàn)槲覀兛赡芤院髸?huì)查詢(xún)更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進(jìn)度條和，沒(méi)有實(shí)際意義，然后在命令行輸入就可以默認(rèn)使用進(jìn)行打包了。更具體的就請(qǐng)查看一下官方文檔了，畢竟篇幅不能太長(zhǎng)。

網(wǎng)上有很多webpack的介紹，也有不少的視頻，但是不少人看到應(yīng)該還是不是很了解webpack里面到底是講什么，而且報(bào)錯(cuò)了之后也是不知所措

那么這里我作為一個(gè)工具小白就闡述一下小白面前應(yīng)該怎么學(xué)習(xí)webpack吧，當(dāng)你看完之后，我相信對(duì)其他工具也會(huì)有更深的了解

在我的文章里主要講解：

webpack基本介紹及安裝

webpack基本配置和配置文件

webpack在項(xiàng)目中如何自動(dòng)生成html文件

強(qiáng)大的loader加載器

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

附：webpack官網(wǎng)地址[英文官網(wǎng)][中文官網(wǎng)]

Webpack是時(shí)下最流行的模塊打包器

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

用一張圖片簡(jiǎn)單表示一下

特點(diǎn)：

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

智能的靜態(tài)分析：webpack的智能解析器幾乎可以處理任何第三方庫(kù)

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

plugin插件：webpack有功能豐富的插件系統(tǒng)，滿足各種開(kāi)發(fā)需求

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

綜合來(lái)說(shuō)webpack綜合了目前網(wǎng)絡(luò)上的打包工具的優(yōu)點(diǎn)，但是也要合理使用，不然也會(huì)適得其反

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

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

第二步，進(jìn)入webpack世界

首先，新建一個(gè)webpack-test文件夾作為你的項(xiàng)目目錄

然后，用npm初始化你的項(xiàng)目，進(jìn)入cmd，切換到你的目錄下，輸入：

npm init

然后會(huì)出現(xiàn)一大堆輸入的東西，這里我們?nèi)窟x擇默認(rèn)輸入enter就好了

輸入完了之后，它會(huì)提示你輸入的信息給你核對(duì)，按下確認(rèn)之后，就會(huì)在你的項(xiàng)目目錄下生成了package.json

下一步，我們?cè)谖覀兊奈募A里面安裝一下webpack吧，在項(xiàng)目目錄下的cmd輸入

npm install webpack --save-dev

這就安裝好了，這里就給大家來(lái)一個(gè)小Demo，讓大家更加了解webpack的打包方式吧，如果已經(jīng)有基礎(chǔ)的同學(xué)可以跳過(guò)這里

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

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

然后在命令行輸入

webpack hello.js hello.bundle.js

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

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

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

//隨便自定義一個(gè)函數(shù)
function world () {

}

再去修改hello.js成為

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

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

再輸入一下

webpack hello.js hello.bundle.js

進(jìn)行打包之后就會(huì)發(fā)現(xiàn)，打包成功里面hello.js的chunks序列號(hào)是0，world.js的chunks序列號(hào)是1，然后在hello.bundle.js看到他們的序列號(hào)也是這樣。

那么如果我想也把css文件也打包進(jìn)去應(yīng)該怎么辦呢？

我們?cè)僭诟夸浵滦陆ㄒ粋€(gè)style.css，在里面簡(jiǎn)單輸入

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

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

接下來(lái)我們下載兩個(gè)loaders加載器，后面說(shuō)一下這兩個(gè)的作用，在命令行輸入

npm install css-loader style-loader

然后把hello.js改成

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

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

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

這時(shí)候，你也許會(huì)覺(jué)得，我說(shuō)了那么多，那么，怎么把這些東西用到我們的頁(yè)面中嗎？下面就會(huì)說(shuō)到

在我們的跟目錄下新建一個(gè)index.html，加入下面內(nèi)容

再把我們的style.css改成

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

body {
    color: red;
}

再把我們的hello.js改成

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

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

hello("hello webpack");

然后我們?cè)俅虬\(yùn)行一下,就可以在頁(yè)面看到我們的結(jié)果，這時(shí)候如果你細(xì)心，就會(huì)發(fā)現(xiàn)我們?cè)赾ss-loader前面加了個(gè)style-loader，如果你不加的話，你就會(huì)發(fā)現(xiàn)你的頁(yè)面打開(kāi)后不是紅色的，因?yàn)檫€沒(méi)經(jīng)過(guò)style-loader的解析，當(dāng)然這只是一種方法，還有其他方法可以自尋在官網(wǎng)看看文檔。

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

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

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

這里就是我們最重要的一個(gè)部分了，如果你看過(guò)很多webpack打包后的開(kāi)源項(xiàng)目之后，你就會(huì)發(fā)現(xiàn)，有些時(shí)候你不知道從哪里看起，那就從配置文件開(kāi)始看起來(lái)吧

相信你應(yīng)該也在不少的文章中看到有關(guān)于配置文件的說(shuō)法的吧，畢竟配置文件也算是最重要的一部分了，這里也可以推薦你看一篇我覺(jué)得還不錯(cuò)的webpack入門(mén)

不過(guò)我如果你沒(méi)有基礎(chǔ)的話，建議繼續(xù)看下我的再去看那一篇，收獲會(huì)更大

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

然后在index.html輸入

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

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

再在main.js里面輸入

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

helloworld();

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

這就是我們的配置文件的最簡(jiǎn)單的用法，以后我們還可以在里面配置很多l(xiāng)oaders，甚至更復(fù)雜的打包，下面一步步說(shuō)明吧。

我們也可以不用在命令行里面輸入webpack，因?yàn)槲覀兛赡芤院髸?huì)查詢(xún)更多東西，因此我們可以，在package.json的script里面加入：

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

這里的--progress和--color只是為了輸出進(jìn)度條和color，沒(méi)有實(shí)際意義，然后在命令行輸入npm run webpack就可以默認(rèn)使用webpack進(jìn)行打包了。

還有更多關(guān)于我們?nèi)肟谖募洼敵鑫募慕榻B，我建議看一下慕課網(wǎng)的這個(gè)視頻會(huì)更加了解webpack配置文件

在說(shuō)這個(gè)之前，我們?yōu)槭裁匆詣?dòng)生成html頁(yè)面？我們直接用index.html不就可以了？但是實(shí)際項(xiàng)目往往是有多個(gè)頁(yè)面的，不過(guò)這里我們就簡(jiǎn)單介紹一個(gè)頁(yè)面怎么自動(dòng)生成，多個(gè)也是同樣的原理，我們先來(lái)安裝一個(gè)插件html-webpack-plugin，我們?cè)诿钚休斎耄?/p>

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",
  }, //我們的入口文件，相當(dāng)于前面一節(jié)webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后，把內(nèi)容輸出到這個(gè)文件夾上,也可以寫(xiě)成"./dist/js"，
    但是這樣放在服務(wù)器上路徑可能會(huì)出錯(cuò)，所以加上__dirname*/
    filename: "[name]-[hash].js" //輸入到上面path文件夾里面的bundle.js，沒(méi)有則自動(dòng)新建
  },
  plugins:[
      new htmlWebpackPlugin()  //對(duì)插件進(jìn)行實(shí)例化
  ]
}

然后，在我們的dist下面就有了一個(gè)項(xiàng)目自動(dòng)生成的inex.html文件了

但是如果你細(xì)心就可以發(fā)現(xiàn)這個(gè)時(shí)候的index.html和我們?cè)瓉?lái)的index.html沒(méi)有任何的聯(lián)系，這時(shí)候我們需要修改我們配置文件中的插件實(shí)例化那里修改成

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

再打包一次之后，就會(huì)發(fā)現(xiàn)生成的dist目錄下面的index.html文件就會(huì)綁定了其他js文件。更具體的就請(qǐng)查看一下官方文檔了，畢竟篇幅不能太長(zhǎng)。

前面我們也有所提到我們的loader加載器，但是實(shí)際中是怎么樣的呢，這里我圍繞我們項(xiàng)目經(jīng)常利用babel-loader轉(zhuǎn)換ES6

Loaders需要多帶帶安裝并且需要在webpack.config.js下的modules關(guān)鍵字下進(jìn)行配置，Loaders的配置選項(xiàng)包括以下幾方面：

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

loader：loader的名稱(chēng)（必須）

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

query：為loaders提供額外的設(shè)置選項(xiàng)（可選）

首先，新建一個(gè)工程webpack-loader吧，然后將項(xiàng)目用npm初始化后，再在項(xiàng)目下下載webpack，然后構(gòu)建好下面的這些目錄

用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";
//導(dǎo)入layer

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

new App()

Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái)，它的強(qiáng)大之處表現(xiàn)在可以通過(guò)編譯幫你達(dá)到以下目的：

下一代的JavaScript標(biāo)準(zhǔn)（ES6，ES7），這些標(biāo)準(zhǔn)目前并未被當(dāng)前的瀏覽器完全的支持；

使用基于JavaScript進(jìn)行了拓展的語(yǔ)言，比如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",
  }, //我們的入口文件，相當(dāng)于前面一節(jié)webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了之后，把內(nèi)容輸出到這個(gè)文件夾上,也可以寫(xiě)成"./dist/js"，
    但是這樣放在服務(wù)器上路徑可能會(huì)出錯(cuò)，所以加上__dirname*/
    filename: "bundle.js" //輸入到上面path文件夾里面的bundle.js，沒(méi)有則自動(dòng)新建
  },
  module: {
    loaders: [
        {
            test: /.js$/, //匹配所有的js文件
            loader: "babel-loader", //引用lbabel插件           
        }

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

再在我們的package.json下加入

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

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

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

有興趣的話，可以繼續(xù)看看慕課網(wǎng)的視頻，在下也是受人啟發(fā)。

還有更多的加載器可以在我們的webpack官網(wǎng)進(jìn)行查詢(xún)，這里我就不進(jìn)行多解釋了