webpack基本概念及使用入門

webpack是什麼，使用它的好處？

webpack官網上對本身的介紹是"模塊打包器(module bundler)"。在各類新特性出現的前端開發時代，例如，react的jsx語法，還有一些拓展語言(TypeScript)，預處理語言sass，less等。想要這些新特性能被瀏覽器識別，就須要作一些處理，而手動處理又是很是麻煩的，因此就有了webpack的誕生，它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

webpack的工做方式

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

幾個核心概念

(1)入口entry

指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

(2)出口output

output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。

(3)loader

loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。
本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。
在更高層面，在 webpack 的配置中 loader 有兩個目標：
test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
use 屬性，表示進行轉換時，應該使用哪一個 loader。

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

以上配置中，對一個單獨的 module 對象定義了 rules 屬性，裏面包含兩個必須屬性：test 和 use。這告訴 webpack 編譯器(compiler) 以下信息：「嘿，webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 '.txt' 的路徑」時，在你對它打包以前，先使用 raw-loader 轉換一下。」

(4)插件

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。多數插件能夠經過選項(option)自定義。你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 經過 npm 安裝
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

(5)模式

經過選擇 development 或 production 之中的一個，來設置 mode 參數，你能夠啓用相應模式下的 webpack 內置的優化

module.exports = {
  mode: 'production'
};

webpack的使用

除了內置的模塊和插件，其他使用前均須要先安裝。

(1)安裝

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

(2)基本配置

在下面的配置中，咱們指定了webpack的入口及出口。

const path = require('path');

module.exports = {
    entry: {
        index: __dirname + "/app/main.js",
    },
    output: {
        path: path.resolve(__dirname, 'public/'),                  
       filename: "[name].js"
    },
    mode: 'production'
}

(3)生成source maps

Source Maps幫助開發人員開發在打包後的文件中，直接定位出bug的代碼位置，從而極大的提高開發效率。

const path = require('path');

module.exports = {
    entry: {
        index: __dirname + "/app/main.js",
    },
    output: {
        path: path.resolve(__dirname, 'public/'),                  
        filename: "[name].js"
    },
    mode: 'production',
      devtool: 'eval-source-map'
}

(4)使用模塊，以babel爲例

const path = require('path');
module.exports = {
  //其它...
  module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

(5)使用插件

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

const path = require('path');
module.exports = {
  //其它...
  module: {
        rules:  //...
    },
 lugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  })
   ], 
    
}