摘要：圖表的起點(diǎn)被稱之為入口起點(diǎn)。插件插件是用來拓展功能的，它們會(huì)在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)的任務(wù)。開始使用非常簡單，我會(huì)展示給你看使用它的一個(gè)簡單的項(xiàng)目。

一、什么是webpack

Webpack 擴(kuò)展了CommonJs的require的想法，彌補(bǔ)了requireJS在模塊化方面的缺陷,擁有強(qiáng)大的JS模塊化的功能，比如你想在 CoffeeScript、Sass、Markdown 或者其他什么代碼中require 你想要的任何代碼的話？那么 Webpack 正是做這方面的工作。它會(huì)通過配置來取出代碼中的依賴，然后把他們通過加載器把代碼兼容地輸出到靜態(tài)資源中。 因此我理解的Webpack，就是一個(gè)出色的前端自動(dòng)化構(gòu)建工具、模塊化工具、靜態(tài)資源打包工具。

二、為什么要用webpack
現(xiàn)在很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包。為了簡化開發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法
a:模塊化，讓我們可以把復(fù)雜的程序細(xì)化為小的文件;
b:類似于TypeScript這種在JavaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的JavaScript不能直接使用的特性，并且之后還能能裝換為JavaScript文件使瀏覽器可以識(shí)別；
c:scss，less等CSS預(yù)處理器
這些改進(jìn)確實(shí)大大的提高了我們的開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識(shí)別,而手動(dòng)處理又是非常反鎖的，

三、webpack的工作方式及目標(biāo)
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。
Webpack的目標(biāo)是：
1、將依賴關(guān)系樹分解為按需加載的大塊；
2、保持初始加載時(shí)間低；
3、每個(gè)靜態(tài)資產(chǎn)都應(yīng)該是一個(gè)模塊；
4、將第三方庫集成為模塊的能力；
5、能夠定制模塊捆綁器的幾乎每個(gè)部分；
6、適合大項(xiàng)目；

四、Webpack的四個(gè)核心概念
1、入口(Entry)
webpack 將創(chuàng)建所有應(yīng)用程序的依賴關(guān)系圖表。圖表的起點(diǎn)被稱之為入口起點(diǎn)。入口起點(diǎn)告訴 webpack?從哪里開始，并遵循著依賴關(guān)系圖表知道要打包什么。
2、出口(Output)
將所有的資源歸攏在一起后，我們還需要告訴 webpack?在哪里打包我們的應(yīng)用程序;webpack 的output屬性描述了如何處理歸攏在一起的代碼。

3、加載器(Loader)
webpack 的目標(biāo)是，讓?webpack?聚焦于項(xiàng)目中的所有資源，而瀏覽器不需要關(guān)注考慮這些（這并不意味著資源(asset)都必須打包在一起）。webpack 把每個(gè)文件(.css, .html, .scss, .jpg, etc.) 都作為模塊處理。而且 webpack?只理解 JavaScript。webpack loader 會(huì)將這些文件轉(zhuǎn)換為模塊，而轉(zhuǎn)換后的文件會(huì)被添加到依賴圖表中。

4、插件(Plugins)
插件（Plugins）是用來拓展webpack功能的，它們會(huì)在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)的任務(wù)。
Loaders和Plugins常常被弄混，但是他們其實(shí)是完全不同的東西：Loaders是在打包構(gòu)建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個(gè);插件并不直接操作單個(gè)文件，它直接對(duì)整個(gè)構(gòu)建過程其作用。
webpack有很多內(nèi)置插件，同時(shí)也有很多第三方插件，可以讓我們完成更加豐富的功能。

五、如何使用webpack
在開始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。我們將會(huì)使用 NPM 安裝一些工具。
開始使用 Webpack 非常簡單，我會(huì)展示給你看使用它的一個(gè)簡單的項(xiàng)目。第一步，為你的項(xiàng)目新建一個(gè)文件夾，然后輸入?npm init，然后填寫相關(guān)問題。這樣會(huì)為你創(chuàng)建了?package.json;
安裝 Webpack
接下來我們安裝 Webpack，我們要把它安裝在本地，然后把它作為項(xiàng)目依賴保存下來。輸入?npm i webpack --save-dev。如果你想運(yùn)行它，輸入?webpack即可
設(shè)置 Webpack
Webpack 的最基礎(chǔ)配置文件長這樣：

Webpack.config.js
var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "build.js"
  }
}

運(yùn)行你的第一個(gè)編譯

現(xiàn)在我們有了一個(gè)最簡單的配置，我們需要有什么東西去編譯，讓我們開始一個(gè)經(jīng)典的?Hello World
現(xiàn)在在你的命令行運(yùn)行?webpack，然后你的應(yīng)用會(huì)開始編譯，一個(gè)?index.html?文件就這樣出現(xiàn)在你的?/dist文件夾下，需要在?dist/?下的?index.html?去啟動(dòng)項(xiàng)目。
這個(gè)文件可以用?html-webpack-plugin?來生成。使用它就只有一個(gè)配置的問題。一般來說使用 Webpack 來工作就是這么個(gè)套路。

在接下來的章節(jié)中我們會(huì)逐步介紹使用 Webpack 來構(gòu)建項(xiàng)目來展示它的能力。

1、單個(gè)打包js到指定文件夾
Webpack.config.js配置

var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "build.js"
  }
}

目錄結(jié)構(gòu)

入口文件app.js:

function hello (){
  const hello = "helloWorld";
  return hello;
}

2、打包多個(gè)入口文件到指定文件夾

Webpack.config.js配置
var path = require("path");
module.exports = {
  entry: {
    a: "./app.js",
    b: "./bpp.js"
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  }
}

目錄結(jié)構(gòu)

3、打包c(diǎn)ss到指定文件夾中的js中
Webpack.config.js配置

var path = require("path");
module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
     {test:/.css$/,loader:"style-loader!css-loader" },
    ]
  }
}

css-loader 是處理css文件中的url()等，style-loader 將css插入到頁面的style標(biāo)簽
目錄

4、打包index.html及多帶帶打包c(diǎn)ss文件
Webpack.config.js配置

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
Var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
        {
          test: /.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html"
    }),
    new ExtractTextPlugin("index.css")
  ]
}

html-webpack-plugin 它會(huì)自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。
使用 extract-text-webpack-plugin就可以把css從js中獨(dú)立抽離出來。

目錄

5、打包圖片資源
Webpack.config.js配置

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
Var ExtractTextPlugin=require
("extract-text-webpack-plugin");
module.exports = {
  entry: {
    bundle: "./app.js",
  },
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "[name].js"
  },
  module:{
    loaders:[
        {
          test: /.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
        })
      },
      {
　　　　　　test: /.html$/,
　　　　　　loader: "html-withimg-loader"
　　　　},
      {
          test: /.(png|jpg|gif)$/,
          loader: "url-loader?limit=8192&name=[hash:8].[name].[ext]"
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "index.html"
    }),
    new ExtractTextPlugin("index.css")
  ]
}

使用file-loader 可以打包c(diǎn)ss中url的圖片，主要用來處理圖片
url-loader是file-loader的加強(qiáng)版，可以使用limit參數(shù)，一般限制小圖片轉(zhuǎn) base64 可以用 url-loader，其他情況都用 file-loader。
url-loader是對(duì)file-loader的上層封裝
html圖片問題用html-withimg-loader
入口文件app.js:

require("./index.css");
function hello (){
  const hello = "helloWorld";
  return hello;
}
hello();

目錄

更多demo請(qǐng)移步https://github.com/Songzhiguo...