前端項目自動化構建工具——Webpack入門教程

　　參考資料：https://www.webpackjs.com/（中文文檔）   https://www.webpackjs.com/（官方文檔）

　　首先有必要說明一下，本文側重講解webpack基本配置屬性，不附帶實例，將會以通俗易懂的形式地講解；如若須要實例進行相關練習，可將本文做爲理論基礎；

　　Webpack是前端項目自動化構建工具，本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。（官網定義）。

　　那麼用咱們人話來講：webpack是一個前端模塊化的解決方案，更側重點打包，能夠把開發中的資源文件（圖片、js文件、css文件等）當作是一個個的模塊，而後經過webpack提供的loader（加載器）和plugins（插件）來進行處理、合併以及壓縮，打包成符合生產環境、體積更小的文件資源，以方便提高瀏覽器的渲染速度；

　　首先咱們要理解一下webpack的四大核心概念：

　　　　入口（entry）

　　　　出口（output）

　　　　loader（加載器）

　　　　plugins（插件）

 

 

　　入口（entry）：　

　　　　webpack入口指的是經過配置來指示webpack的入口文件，即從哪裏開始，咱們能夠在webpack中配置entry屬性，來指定入口文件的路徑；

　　　　　咱們能夠看一個簡單的案例：

　　　　　

//必須將模塊拋出webpack才能訪問獲得
module.exports = {
  //entry屬性指定入口文件    值爲相對路徑  
  entry: './src/app.js'
}

 

　　出口（output）：

　　　出口即告訴webpack在哪裏輸出它所建立的bundles，以及如何命名這些文件，輸出的文件目錄路徑；也就是說在你用webpack打包的時候能夠經過添加output屬性，來設置最終通過webpack打包輸出後的文件名以及輸出路徑；

　　

//引入node的path模塊
const path = require('path');

module.exports = {
  // webpack執行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依賴的模塊合併輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
   //__dirname是node環境中全局變量，表示當前目錄
    path: path.resolve(__dirname, './dist'),
  }
};

 

 

 

　　加載器（loader）：

　　　　　loader是讓webpack可以去處理一些非Javscript類型的文件（webpack自身只可以識別原生JS和ES5），loader能夠將全部類型的文件轉爲webpack能處理的有效模塊，而後就能夠經過webpack的打包能力，對這些文件進行處理；loader的配置有兩個選項：

　　　　　test：通常都是正則表達式，用於匹配文件類型；

　　　　　use：能夠是key：value的形式也能夠是數組，用來告訴webpack使用什麼loader來加載文件

　　

//引入node的path模塊
const path = require('path');

module.exports = {
  // webpack執行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依賴的模塊合併輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
   //__dirname是node環境中全局變量，表示當前目錄
    path: path.resolve(__dirname, './dist'),
  }
    //模塊關鍵字，加載器須要在這裏進行配置
    module:{
        //rules爲數組，保存每一個加載器的配置
        rules:[
            {
                //test屬性必須配置，值爲正則表達式，用於匹配文件
                test:/\.css$/,
                // 對同一個文件引入多個loader的方法
                use:[
                    //loader爲loader加載器的名稱，必須配置，值爲字符串
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ],
                
                //過濾，排除node_module目錄下的文件
                exclude:/node_module/,
                //指定匹配文件的範圍   指定/demo/目錄下的.css文件進行匹配
                include:/demo/
            }
        ]
    }
    

};

 

　　webpack中規定，在webpack中定義loader時，須要定義在module.rules中，不然會報錯；test和use兩個屬性分別指定了匹配文件的規則和用什麼loader來處理，這兩個屬性都是必選的，exclude、include分別表示過濾（不處理）某個文件中的文件和指定（處理）某個文件夾中的文件，這兩個屬性都是可選項；

 

　　插件（plugins）：

　　　　loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。要使用某個插件，你須要require（引入）插件，而後添加到plugins數組中，多數插件能夠經過選項option來自定義

 

 

//引入node的path模塊
const path = require('path');
//引入extract-text-webpack-plugin插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // webpack執行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依賴的模塊合併輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
   //__dirname是node環境中全局變量，表示當前目錄
    path: path.resolve(__dirname, './dist'),
  }
    //模塊關鍵字，加載器須要在這裏進行配置
    module:{
        //rules爲數組，保存每一個加載器的配置
        rules:[
            {
                //test屬性必須配置，值爲正則表達式，用於匹配文件
                test:/\.css$/,
                // 對同一個文件引入多個loader的方法
                use:[
                    //loader爲loader加載器的名稱，必須配置，值爲字符串
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ],
                
                //過濾，排除node_module目錄下的文件
                exclude:/node_module/,
                //指定匹配文件的範圍   指定/demo/目錄下的.css文件進行匹配
                include:/demo/
            }
        ]
    }
    //配置插件
    plugins: [
    new ExtractTextPlugin({
      //自定義配置插件選項
      // 從 .js 文件中提取出來的 .css 文件的名稱
      filename: `[name]_[md5:contenthash:hex:8].css`,
    }),
]
};

 

　　上面就是webpack的四大核心概念，下面咱們來介紹一些經常使用的插件：

　　

　　loader處理css和Sass：

　　　　默認狀況下webpack是處理不了CSS的代碼的，可是咱們能夠經過webpack的loader加載器來處理；

　　　　  

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

 

 

在平常開發中，咱們只須要在webpack.config.js文件中寫上上面的配置代碼便可讓webpack來處理CSS代碼和Sass代碼；

 

 

 

　　webpack-dev-server：

　　　　　　webpack-dev-server是webpack的一個經常使用插件，能夠用來在本地上開啓服務、啓動瀏覽器而且能夠實時監聽文件修改；

　　　　

module.exports = {
  entry: './src/app.js',
  ...
    //進行webpack-dev-server插件配置
  devServer: {
    //端口號，默認8080，能夠自定義修改
    port: 9000,
   //運行webpack-dev-server的時候自動打開瀏覽器
    open: true
  },
  ...
};

 

 

 

　　source-map調試：

　　　　開發老是離不開調試，可是咱們用webpack給項目打包了以後，咱們是很不方便找到錯誤或者問題所在的，固然webpack也想到了這一點，所以webpack給咱們提供了source-map來進行調試；

　　　　

　　　　devtool選項　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　source-map　

　　　　配置結果　　　　　　　　　　　　

　　　　在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包速度；

 

　　　　devtool選項　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-source-map

　　　　配置結果　　　　　　　　　　　　

　　　　在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

 

　　　　devtool選項　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　eval-source-map

　　　　配置結果　　　　　　　　　　　　　

　  　　使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；

 

　　　　devtool選項　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-eval-source-map　

　　　　配置結果　　　　　　　　　　　　　

　　　　這是在打包文件時最快的生成source map的方法，生成的Source Map會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

 

 

　　綜上所述，從上到下打包速度愈來愈快，不過同時帶來的反作用也越多，較快的打包速度的後果就是對打包後的文件的的執行有必定影響。在中小型項目中，eval-source-map是一個比較不錯的選擇；

cheap-module-eval-source-map方法構建速度更快，可是不利於調試，推薦在大型項目考慮時間成本時使用。

 

module.exports={
    devtool:"eval-source-map",
}

　　在webpack打包以後，若是報錯咱們是看不到源文件的，由於此時文件已經被webpack打包了，這很不方便咱們的開發調試，source-map就是用來解決這個問題的，經過添加配置devtool:"eval-source-map"這一行簡單的代碼，咱們便可在調試的時候看到咱們的源文件進行調試；