webpack基礎一些概念入口檔案出口load插件

webpack-基礎

貌似這些屬于編譯原理的内容。

當時看了一點編譯原理，當中的自動機，徹底懵。

不過大概了解了一點内容。感覺webpack一個打包工具非常類似于一個編譯器，将一個檔案，轉換為另外一個檔案。

一些概念

入口

入口，即尋找入口檔案的及其依賴項的檔案。即編譯前的檔案

配置檔案為webpack.config.js中修改為

module.exports = { 
  entry: "./app.js"
}           

使用這個可以設定入口檔案為./app.js由該檔案，可以尋找相關的依賴

出口

output告訴要生成那些檔案

const path = require("path");

module.exports = { 
  entry: "./app.js",
  output: {
      filename: "my-first-webpack.js"
  }
}           

導出該檔案

loader

loader可以讓webpack處理非js檔案。

module: {
      rules: [
          {test: /\.txt$/, use: 'raw-loader'}    // 再遇到txt檔案的時候，需要使用ras-loader進行轉換一下 
      ]
  }           

遇到txt檔案的時候，需要使用raw-loader進行轉換

類似于express中的中間件

raw-loader表示将檔案作為字元串進行讀取

插件

即打包，優化，定義環境中的變量等。

plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'})
  ]           

入口檔案

const config = {
    entry: './file.js',    // 定義入口檔案
}

module.exports = config;           

分離應用程式和第三方庫

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
}

module.exports = config;           

在上方中webpack會根據app和vendors分别建立兩個互相沒有任何依賴的依賴圖，進行打包

在平常中，一個html文檔，隻使用一個入口檔案。

如何寫出編譯後的檔案。

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    },
    output: {
        filename: 'bundle.js',    // 檔案名稱
        path: '/home/assets'    // 輸出後的絕對路徑
    }
}

module.exports = config;           

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    },
    output: {
        filename: '[name].js',    // 檔案名稱,name為對象名，輸出的檔案為app.js vendors.js
        path: '/home/assets'    // 輸出後的絕對路徑
    }
}

module.exports = config;           

出口，即編譯完成後生成的檔案

load

load為代碼轉換，可以使用這個加載css檔案，使用這個将typeScript轉為JavaScript

安裝

npm install --save-dev ts-loader           

const config = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].js',    // 檔案名稱,name為對象名，輸出的檔案為app.js vendors.js
        path: '/home/assets'    // 輸出後的絕對路徑
    },
    module: {
        rules: [
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    }
}

module.exports = config;           

使用這個可以在打包的時候，将ts檔案轉為js檔案。

建立同名的js檔案

這裡的是apply()函數。

const pluginName = "ConsoleLogOnBuildWebpackPlugin"

class ConsoleLogOnBuildWebpackPlugin {
    apply(){
        console.log('建構開始');
    }
}           

使用插件

const webpack = require('webpack');    // 通路内置插件

const config = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].js',    // 檔案名稱,name為對象名，輸出的檔案為app.js vendors.js
        path: '/home/assets'    // 輸出後的絕對路徑
    },
    module: {
        rules: [
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    },
    plugins: [
        new webpack.optimize.UgifyJsPlugin(),
        new ConsoleLogOnBuildWebpackPlugin()
    ]
}

module.exports = config;