Webpack模塊加載器

時間 2019-11-13

標籤 webpack 模塊加載简体版

原文原文鏈接

1、介紹css

Webpack是德國開發者 Tobias Koppers 開發的模塊加載器，它能把全部的資源文
件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都做爲模塊來使用和處理。html

做爲一個模塊打包工具，主要功能是打包資源文件並整合到一個包中，咱們在開發時，只需
要引用一個包文件，就能加載預先設計好的模塊功能。vue

2、安裝react

不一樣文件類型的資源，Webpack有對應的模塊loader，ES6語法轉換用的是babel-loader，
dataUrl用的是url-loader，樣式用的style、css-loader。
loader列表：http://webpack.github.io/docs/list-of-loaders.htmlwebpack

# 安裝webpack
npm install webpack # 使用babel、css、dataUrl模塊 npm install style-loader css-loader url-loader babel-loader babel-preset-es2015 # 建立webpack.config.js文件 touch webpack.config.js

安裝Webpack以後，能夠使用webpack命令行工具，它默認讀取當前目錄下的webpack.config.js配置文件。git

3、基本使用github

webpack聲明加載babel、style、css、url的loader以後會讀取main.js全部模塊，並把打包
後的結果輸出到bundle.js文件中。web

module.exports = {
  // 讀取main.js文件中引用的全部模塊
  entry: './main.js', // 執行打包後輸出的文件  output: { filename: 'bundle.js' }, // 加載模塊  module: { loaders: [ // 匹配全部js文件，用babel工具識別ES6代碼轉換成ES5 { test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015']} }, // 匹配全部css文件, 用style和css工具解析 { test: /\.css$/, loader: 'style-loader!css-loader' }, // 匹配全部png文件，解析成dataUrl格式 { test: /\.(png|jpg)$/, loader: 'url-loader'} // inline base64 URLs for <=8k images, direct URLs for the rest  ] } };

建立五個資源文件，分別寫入
1. main.js
2. js/console-01.js
3. js/console-02.js
4. css/index.css
5. images/3.jpgnpm

// main.js - 加載模塊
// --------------------------------------------
require('./js/console-01.js');
require('./js/console-02.js'); require('./css/index.css'); // 讀取圖片模塊，並輸出到body中 var img = document.createElement('img'); img.src = require('./images/react.jpg'); document.body.appendChild(img); // -------------------------------------------- // JS - console-01.js console.log('console 01'); // JS - ES6 - console-02.js for (let i = 2; i <= 10; i++) { console.log('console 02'); } // CSS樣式模塊 body { background: #ccc; }

運行webpack命令，它會讀取main.js文件，並把main.js依賴的模塊進行打包處理，最終輸出到bundle.js文件下。segmentfault

# 運行webpack命令
webpack

# 輸出結果
------------------------------------------------------ Hash: d9ca67a5753768b7c625 Version: webpack 1.12.11 Time: 52ms Asset Size Chunks Chunk Names bundle.js 24 kB 0 [emitted] main + 8 hidden modules ------------------------------------------------------

建立一個index.html文件，並引用bundle.js打開瀏覽器後

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

bundle.js文件包含了 CSS樣式加載、圖片dataUrl、JS 的合併打包處理。

4、哪些項目用到Webpack
1. React（JSX）
2. Vue （.vue）
3. Ant Design （淘寶Ant全組件）

5、哪些項目適合用Webpack
1. 單頁應用 SPA （Single Page Application）
2. 須要把資源文件整理成一個文件包的項目
3. 用到ES6和JSX項目
4. 能夠考慮代替Gulp、Grunt等工具

參考資料：
http://webpack.github.io/
https://github.com/webpack
http://segmentfault.com/a/1190000002551952

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。