初涉Webpack

Webpack記錄文檔

1. 概念: webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

2. 打包第一個文件:

   • 全局安裝webpack:

     npm install webpack -g

   • 新建一個文件夾放入兩個文件，一個爲html一個爲就是文件，其中HTML引入該js文件打包後的文件名
   • 執行webpack js文件 打包後的文件名

   • 此時若是出現報錯:

     Cannot find module 'webpack-cli'
     請執行: npm install --save-dev webpack

     再執行出現:

     WARNING in configuration 
     The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
     請先執行 npm init -y, 生成package.json
     在新建一個webpack.config.js配置文件，用於配置webpack選項
     寫入:
     const path = require('path')
     // 經過Node模塊，向外面暴露一個配置
     module.exports = {
       entry:path.join(__dirname, './src/main.js'), // 打包文件
       output: {
         path: path.join(__dirname, './dist') // 打包好的文件名
       },
       mode: 'development' // 設置mode
     }

     此時再執行打包將無報錯，且生成的文件將放入當前目錄下的dist文件夾, 默認文件名爲main.js

3. 五大核心概念:
   | 中文名 | 配置項 | 概述 |
   | ---- | ---- | ---- |
   | 入口 | entry | 構建依賴圖的開端 |
   | 輸出 | output | 打包產出位置 |
   | 轉化器 | loader | 編譯的時候,對各類類型的模塊, 進行轉換處理 |
   | 插件 | plugin | 對每一個任務環節，提供功能 |
   | 模式 | mode | 設置打包環境 |

4. 認識webpack配置文件(即webpack.config.js)

   • 做用: 把配置參數，抽離到單獨的文件，便於項目配置。

   • 基礎格式:

     const path = require('path')    // node的基礎path模塊
     const 插件1 = require('插件1')
     module.exports = {
       //模式——設置開發模式
       mode: 'development',
       //入口——指定src/index.js爲入口文件
       entry: {
         main: './src/index.js'
       },
       //輸出——指定dist/bundle.js爲輸出文件
       output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'bundle.js'
       },
       //轉換器。模塊>規則
       module: {
         rules: [
           { test: /\.後綴名$/, 
             use: [
               {
                 loader: '轉換器1',
                 options: {}    //轉換器1配置
               }
             ]
           }
         ]
       },
       //插件
       plugins: [
         new 插件1({
           //插件配置
           })
       ]
     }

5. 入口(entry):

   • 每一個entry屬性，對應一個入口文件，便於單頁、多頁應用的js引入,

     單頁面入口
     entry: {
       main: './src/index.js
     }
     // 可縮寫爲entry: './src/index.js'

     多頁面入口
      entry: {
        one: './src/one/index.js',
        two: './src/two/index.js',
        three: './src/three/index.js'
      }

   也可以使用node的path模塊實現獲取相對於配置文件的路徑

   const path = require('path')
    module.exports = {
      entry: path.resolve(__dirname, './app.js')
    }
    // 注意，這裏的__dirname, 爲兩個下劃線

   • entry支持三種格式:

     對象:

     entry: {
       <key>: <value>
     }
     // key能夠是簡單的字符串, 對應着output.filename配置中的[name]變量,
     entry: {
       'app-entry': './app.js'
     }
     // key還能夠是路徑字符串。此時webpack會自動生成路徑目錄，並將路徑的最後做爲[name]
     entry: {
       'path/of/entry': './app.js'
     }
     
     // value若是是字符串，並且必須是合理的noderequire函數參數字符串。好比文件路徑：'./app.js'(require('./app.js'))；好比安裝的npm模塊：'lodash'(require('lodash')) 
     
     entry: {
       'my-lodash': 'lodash'
     },
     output: {
       path: './output',
       filename: '[name].js'
     }

     數組:

     entry: ['./app.js', 'lodash']
     等價於:
     entry: {
       main: ['./app.js', 'lodash']
     }

     字符串:

     entry: './app.js'
     等價於
     entry: {
       main: './app.js'
     }

6. output（輸出）

   • output是影響編譯輸出的選項。output選項告訴webpack怎麼把編譯文件寫入磁盤。注意，雖然能夠有不少輸入口，可是隻有一個輸出配置

     output: {
       path: path.resolve(__dirname, 'dist')
       filename: [name].js    // 使用[name]佔位符，自動識別入口文件名，從而區分打包文件名
     }

   • output.filename: 指定輸出到硬盤的文件的的文件名。這裏不能是一個絕對的路徑！output.path會肯定該文件的存在硬盤額路徑的。filename僅僅用來給每一個文件命名而已。

     [name]被入口的名字替換.

     [hash]被編譯器hash替換.

     [chunkhash] 被入口的hash替換.

   • output.path 編譯後的文件存放路徑，絕對路徑，取[hash]將被編譯後的文件hash替換
   • output.chunkFilename 非入口chunk的文件名，做爲一個相對路徑放到output.path裏。

7. module 配置如何處理模塊

   • rules配置模塊的讀取和解析規則，一般用來配置Loader，類型是一個數組，數組裏的每一項都描述了怎麼去處理特定的文件。

   匹配規則：

   1. 條件匹配： 經過test/include/exclude三個配置項來命中Loader要應用的規則文件
   2. 應用規則： 對選中的文件經過use配置項來應用loader，能夠應用一個loader或者從後往前應用一組loader，同時還能夠分別給loader傳入參數。
   3. 重置順序，一組loader的執行順序默認是從右到左執行，經過exforce選項可讓其中一個loader的執行順序放到最前或者最後。
   
   module: {
       rules: [
           {
               test: /\.js$/,
               use: ['babel-loader?cacheDirectory'],
               include: path.resolve(__dirname, 'src')
           },
           {
               test: /\.scss$/,
               use: ['style-loader', 'css-loader', 'sass-loader'],
               exclude: path.resolve(__dirname, 'node_modules')
           },
           { // test、include、exclude還支持數組類型
               test: [/\.jsx?$/, /\.tsx?$/],
               include: [
                   path.resolve(__dirname, 'src'),
                   path.resolve(__dirname, 'test')
               ],
               exclude: [
                   path.resolve(__dirname, 'node_modules'),
                   path.resolve(__dirname, 'bower_modules')
               ]
           }
       ]
   }

   • 在loader須要傳入不少參數的時候，咱們還能夠經過一個object來描述，如：

     use: [
         {
             loader: 'babel-loader',
             options: {
                 cacheDirectory: true
             },
              // enforce:'post' 的含義是把該 Loader 的執行順序放到最後
             // enforce 的值還能夠是 pre，表明把 Loader 的執行順序放到最前面
             enforce:'post'
         }
     ]

   • noParse: 可讓webpack忽略部分未採用模塊化的文件的遞歸解析和處理，類型能夠爲RegExp, [RegExp], function其中一個

   • 常見的loader配置：

     { // 加載圖像
       test: /\.(png|svg|jpg|gif)$/,
       use: [
         'file-loader'
       ]
     }
     
     { // 加載字體
       test: /\.(woff|woff2|eot|ttf|otf)$/,
       use: [
         'file-loader'
       ]
     }
     
     { // 加載css
       test: /\.css$/,
       use: [
         'style-loader',
         'css-loader'
       ]
     }

8. plugins:

   //經過new實例，啓用插件
   plugins: [
     new webpack.ProgressPlugin(),    //webpack自帶一系列插件
     new HtmlWebpackPlugin({template: './src/index.html'})    //使用對象，爲插件配置參數
   ]

   常見的plugin：

   • HotModuleReplacementPlugin –開啓全局的模塊熱替換(HMR)；
   • NamedModulesPlugin –當模塊熱替換(HMR)時在瀏覽器控制檯輸出對用戶更友好的模塊名字信息；
   • CommonsChunkPlugin –提取chunk公共部分；
   • ExtractTextPlugin –獨立生成css文件，之外鏈的形式加載；
   • UglifyJsPlugin –壓縮js；
   • HtmlWebpackPlugin –使用模版生成html。

9. 環境變量：

   webpack能夠設置環境變量以區分生產模式仍是開發模式，由此執行不一樣的操做。

   const NODE_ENV = process.env.NODE_ENV // 可獲取到環境變量
   可由此對目前是生產模式仍是開發模式

10. 開發模式：webpack.dev.js配置文件
11. 生產模式：webpack.prod.js配置文件

12. resolve: webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴。例如：

    resolve: {
        nodules: [path.resolve(__dirname, "node_modules")],
        extensions: ['.js', '.json', '.scss', '.vue', '.json']
        // 模塊別名定義，方便後直接引用別名， 無需多寫長地址
        alias: {
          '@/static': resolve('static'), // 將@/static指向當前項目，下的static目錄
          '@': resolve('src'), // 將@指向src目錄
        }
    }

13. 命令：

    //開發模式，啓動服務器
    webpack-dev-server --open --config webpack.dev.js
    //生產模式，打包
    webpack --config webpack.prod.js

14. webpack還能夠支持Node操做，可經過Node對現有文件進行操做，以知足打包所需。

使用demo參考： 阮一峯的https://github.com/ruanyf/web...