webpack基礎

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;