webpack(2)webpack核心概念


前言

  本質上,webpack 是一個用於現代 JavaScript 應用程序的 靜態模塊打包工具。當 webpack 處理應用程序時,它會在內部構建一個 依賴圖(dependency graph),此依賴圖對應映射到項目所需的每個模塊,並生成一個或多個 bundle。接下來我們就會使用webpack來進行打包
 

webpack的概念

在開始前我們需要先理解一些核心概念:

  • 入口(entry)
  • 輸出(output)
  • loader
  • 插件(plugin)
  • 模式(mode)
  • 瀏覽器兼容性(browser compatibility)
  • 環境(environment)
     

入口(entry)

入口起點(entry point) 指示 webpack 應該使用哪個模塊,來作為構建其內部 依賴圖的開始。進入入口起點后,webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的。

默認值是 ./src/index.js,但你可以通過在 webpack.config.js 文件中配置 entry 屬性,來指定一個(或多個)不同的入口起點。例如:

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

 

單個入口(簡寫)語法

entry 屬性的單個入口語法,參考下面的簡寫:

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

 

我們也可以將一個文件路徑數組傳遞給 entry 屬性,這將創建一個所謂的 "multi-main entry"。在你想要一次注入多個依賴文件,並且將它們的依賴關系繪制在一個 "chunk" 中時,這種方式就很有用。

// webpack.config.js
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

總結:當你希望通過一個入口為應用程序或工具快速設置 webpack 配置時,單一入口的語法方式是不錯的選擇。然而,使用這種語法方式來擴展或調整配置的靈活性不大
 

對象語法

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

對象語法會比較繁瑣。然而,這是應用程序中定義入口的最可擴展的方式。

對象可以使用如下屬性:

  • dependOn: 當前入口所依賴的入口。它們必須在該入口被加載前被加載。
  • filename: 指定要輸出的文件名稱。
  • import: 啟動時需加載的模塊。
  • library: 指定 library 選項,為當前 entry 構建一個 library
  • runtime: 運行時 chunk 的名字。如果設置了,就會創建一個以這個名字命名的運行時 chunk,否則將使用現有的入口作為運行時。
  • publicPath: 當該入口的輸出文件在瀏覽器中被引用時,為它們指定一個公共 URL 地址。
// webpack.config.js
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

 

輸出(output)

可以通過配置 output 選項,告知 webpack 如何向硬盤寫入編譯文件。注意,即使可以存在多個 entry 起點,但只能指定一個 output 配置。
 

用法

webpack 配置中,output 屬性的最低要求是,將它的值設置為一個對象,然后為將輸出文件的文件名配置為一個 output.filename

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

此配置將一個單獨的 bundle.js 文件輸出到 dist 目錄中。
 

多個入口起點

如果配置中創建出多於一個 "chunk"(例如,使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件),則應該使用占位符(substitutions)來確保每個文件具有唯一的名稱。

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// 寫入到硬盤:./dist/app.js, ./dist/search.js

 

loader

什么是loader?

  • loaderwebpack中非常核心的一個概念
  • webpack用來做什么?
    • 在我們之前的實例中,我們主要是用webpack來處理js代碼,並且webpack會自動處理js中的依賴
    • 但是,在開發中我們不僅僅有js代碼要處理,我們也需要加載css、圖片,也包括一些高級的將es6轉成es5的代碼,將Ts轉成es5的代碼,將scss、less轉成css代碼等等
    • 對於webpack本身的能力來說,對於這些轉化是不支持的
    • 但是我們給webpack擴展對應的loader即可
  • loader的使用過程
    • 步驟一:通過npm安裝對應使用的loader
    • 步驟二:在webpack.config.js中的modules關鍵字進行配置
  • 大部分loader我們都可以在官網中找到,並學習對應的用法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM