webpack—入門

weixin_34119545發表於2018-02-25
Web

點選進入webpack官網。，開始教程時，建議先學習ES6語法，也請先觀看本篇Windows符號介紹文章，當所有webpack內容學習完後，會有一個專門的介紹

webpack四個核心概念（從官網入門——人要有自己的見解）

　　入口（entry）

　　輸出（output）

　　loader

　　外掛（plugins）

 

入口【entry】：

1.指明webpack使用那個模組，作為構建其內部依賴圖。

2.入口點後，webpack會找出那些模組和庫有直接或間接依賴。

 

例子（webpack.config.js）：

module.exports = {
  entry: './path/to/my/entry/file.js'
};

 

 

 

出口【output】：

 

1.output指明webpack在哪裡輸出它所建立的bundles.

2.還有就是重新命名這些檔案（這些都是你配置的）。

 

例子（webpack.config.js）：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

 

output.path指明瞭輸出的路徑。

output.filename指明瞭輸出時的重新命名。

所以配置以上出口資訊會影響到webpack bundle生成檔案時輸出的路徑以及重新命名。

 

Loader：

 

loader用來處理非javascript檔案，例如：html、css（並且webpack只能識別javascript）

loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。

 

webpack配置loader有兩個目標：

　　1.test 屬性，用於標識出應該被對應的loader進行轉換的某個或某些檔案。

　　2.use 屬性，表示進行轉換時，應該使用哪個loader（有多個loader處理機制）

 

例子（webpack.config.js）：

 

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    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 轉換一下。

外掛（plugins）：

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。

外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。

想要使用一個外掛，你只需要 require() 它，然後把它新增到 plugins 陣列中。

多數外掛可以通過選項(option)自定義。

你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛，這時需要通過使用 new 操作符來建立它的一個例項。

 

例子（webpack.config.js）：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內建外掛
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

 

相關文章