webpack初識

webpack是什么？

前端資源加載/打包工具。根據(jù)模塊的依賴關系進行靜態(tài)分析，將模塊按照指定的規(guī)則生成對應靜態(tài)資源。將靜態(tài)資源js\css\less之間的依賴，打包成每個靜態(tài)文件，減少頁面的請求

安裝webpack

前提：本地環(huán)境支持node.js 使用淘寶鏡像
使用 cnmp install webpack -g 安裝webpack

weback打包

webpack run.js bundle.js
以上命令會編譯run.js 并生成bundle.js
webpack 根據(jù)模塊的依賴關系進行靜態(tài)分析，這些文件(模塊)會被包含到 bundle.js 文件中。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。 在頁面啟動時，會先執(zhí)行 runoob1.js 中的代碼，其它模塊會在運行 require 的時候再執(zhí)行。

loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。

接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數(shù) -g)。
cnpm install css-loader style-loader
執(zhí)行以上命令后，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。
require("./style.css");
document.write(require("./runoob2.js"));
然后執(zhí)行：

webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'

loader 特性
loader 支持鏈式傳遞。能夠對資源使用流水線(pipeline)。一組鏈式的 loader 將按照相反的順序執(zhí)行。loader 鏈中的第一個 loader 返回值給下一個 loader。在最后一個 loader，返回 webpack 所預期的 JavaScript。
loader 可以是同步的，也可以是異步的。
loader 運行在 Node.js 中，并且能夠執(zhí)行任何可能的操作。
loader 接收查詢參數(shù)。用于對 loader 傳遞配置。
loader 也能夠使用 options 對象進行配置。
除了使用 package.json 常見的 main 屬性，還可以將普通的 npm 模塊導出為 loader，做法是在 package.json 里定義一個 loader 字段。
插件(plugin)可以為 loader 帶來更多特性。
loader 能夠產(chǎn)生額外的任意文件。

配置文件

我們可以將一些編譯選項放在配置文件中，以便于統(tǒng)一管理：

創(chuàng)建 webpack.config.js 文件，代碼如下所示

module.exports = {
    mode:"production", // 會將 process.env.NODE_ENV 的值設為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
    entry: "./runoob1.js",
    // entry:{
   //    pageOne: './src/pageOne/index.js',
   //    pageTwo: './src/pageTwo/index.js',
   //    pageThree: './src/pageThree/index.js' 
    }
    output: {
        path: __dirname, //目標輸出目錄 path 的絕對路徑
        filename: "bundle.js" // 用于輸出文件的文件名
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('菜鳥教程 webpack 實例')
    ]
};

webpack 命令執(zhí)行后，會默認載入當前目錄的 webpack.config.js 文件。

• entry(入口) 指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。每個依賴項隨即被處理，最后輸出到稱之為 bundles 的文件中
• output(出口) 告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認值為 ./dist 基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中
• loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它 們進行處理。
  test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。
  use 屬性，表示進行轉換時，應該使用哪個 loader。
• plugins(插件) loader 被用于轉換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務。從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。
  webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。使用內置插件需要通過以下命令來安裝：
  cnpm install webpack --save-dev
  比如我們可以安裝內置的 BannerPlugin 插件，用于在文件頭部輸出一些注釋信息。
  想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創(chuàng)建它的一個實例。

mode(模式)

提供 mode 配置選項，告知 webpack 使用相應模式的內置優(yōu)化