摘要：圖表的起點被稱之為入口起點。插件插件是用來拓展功能的，它們會在整個構建過程中生效，執行相關的任務。開始使用非常簡單，我會展示給你看使用它的一個簡單的項目。

一、什么是webpack

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

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

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

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

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

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

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

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

運行你的第一個編譯

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

在接下來的章節中我們會逐步介紹使用 Webpack 來構建項目來展示它的能力。

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

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

目錄結構

入口文件app.js:

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

2、打包多個入口文件到指定文件夾

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"
  }
}

目錄結構

3、打包css到指定文件夾中的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標簽
目錄

4、打包index.html及多帶帶打包css文件
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 它會自動幫你生成一個 html 文件，并且引用相關的 assets 文件(如 css, js)。
使用 extract-text-webpack-plugin就可以把css從js中獨立抽離出來。

目錄

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 可以打包css中url的圖片，主要用來處理圖片
url-loader是file-loader的加強版，可以使用limit參數，一般限制小圖片轉 base64 可以用 url-loader，其他情況都用 file-loader。
url-loader是對file-loader的上層封裝
html圖片問題用html-withimg-loader
入口文件app.js:

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

目錄

更多demo請移步https://github.com/Songzhiguo...