webpack模塊化管理和打包工具

時間 2019-11-30

標籤 webpack 模塊化管理打包工具简体版

原文原文鏈接

Webpack簡介javascript

webpack是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際css

須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。html

模塊系統的演進<script>標籤前端

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

這是最原始的 JavaScript 文件加載方式，若是把每個文件看作是一個模塊，那麼他們的接口一般是暴露在全局做用域下，也就是定義在 window 對象中，java

不一樣模塊的接口調用都是一個做用域中，一些複雜的框架，會使用命名空間的概念來組織這些模塊的接口，典型的例子如 YUI 庫。jquery

這種原始的加載方式暴露了一些顯而易見的弊端：webpack

全局做用域下容易形成變量衝突
文件只能按照 <script> 的書寫順序進行加載
開發人員必須主觀解決模塊和代碼庫的依賴關係
在大型項目中各類資源難以管理，長期積累的問題致使代碼庫混亂不堪

CommonJS規範git

CommonJS 是以在瀏覽器環境以外構建 JavaScript 生態系統爲目標而產生的項目，好比在服務器和桌面環境中。github

CommonJS 規範是爲了解決 JavaScript 的做用域問題而定義的模塊形式，可使每一個模塊它自身的命名空間中執行。該規範的主要內容是，模塊必須經過 module.exports 導出對外的變量或接口，經過 require() 來導入其餘模塊的輸出到當前模塊做用域中。web

一個直觀的例子

// moduleA.js
module.exports = function( value ){
    return value * 2;
}

// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

AMD規範

AMD（異步模塊定義）是爲瀏覽器環境設計的，由於 CommonJS 模塊系統是同步加載的，當前瀏覽器環境尚未準備好同步加載模塊的條件。

模塊經過 define 函數定義在閉包中，格式以下：

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模塊的名字，它是可選的參數。

factory 是最後一個參數，它包裹了模塊的具體實現，它是一個函數或者對象。若是是函數，那麼它的返回值就是模塊的輸出接口或值。　

一些用例

定義一個名爲 myModule 的模塊，它依賴 jQuery 模塊：

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模塊的輸出
    $('body').text('hello world');

}); // 使用 require(['myModule'], function(myModule) {});

注意：在 webpack 中，模塊名只有局部做用域，在 Require.js 中模塊名是全局做用域，能夠在全局引用。

定義一個沒有 id 值的匿名模塊，一般做爲應用的啓動函數：

define(['jquery'], function($) {
    $('body').text('hello world');
});

　AMD也採用require()語句加載模塊，但不一樣於CommonJS,他要求兩個參數

第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：

math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。因此很顯然，AMD比較適合瀏覽器環境

目前，主要有兩個Javascript庫實現了AMD規範：require.js和curl.js

　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

什麼是 Webpack

Webpack 是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 的特色

代碼拆分

Loader

智能解析

插件系統

快速運行

webpack基本使用

建立項目根目錄
初始化

npm init 或 npm init -y
全局安裝

npm install webpack -g
局部安裝,在項目目錄下安裝

npm install webpack --save-dev

--save: 將安裝的包的信息保存在package中
--dev:開發版本,只是項目構建的時候使用,項目構建完成後並不依賴的文件
若是使用web開發工具,單獨安裝

npm install webpack-dev-server --save-dev

基本使用

首先建立一個靜態頁面 index.html 和一個 JS 入口文件 entry.js：

<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

建立entry.js

// entry.js  : 在頁面中打印出一句話
document.write('It works.')

而後編譯 entry.js並打包到 bundle.js文件中
```
// 使用npm命令  
webpack entry.js bundle.js
```

使用模塊

1.建立模塊module.js,在內部導出內容

module.exports = 'It works from module.js'

2.在entry.js中使用自定義的模塊

//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模塊

加載css模塊

1.安裝css-loader

npm install css-loader style-loader --save-dev

2.建立css文件

//style.css
body { background: yellow; }

3.修改 entry.js：

require("!style-loader!css-loader!./style.css") // 載入 style.css
document.write('It works.')
document.write(require('./module.js'))

建立配置文件webpack.config.js

1.建立文件

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        //同時簡化 entry.js 中的 style.css 加載方式：require('./style.css')
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

2.修改 entry.js 中的 style.css 加載方式：require('./style.css')

3.運行webpack

在命令行頁面直接輸入webpack

插件使用

1.插件安裝

//添加註釋的插件
npm install --save-devbannerplugin

2.配置文件的書寫

var webpack = require('webpack')

module.exports = {
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            //同時簡化 entry.js 中的 style.css 加載方式：require('./style.css')
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ],
        plugins: [
            //添加註釋的插件
            new webpack.BannerPlugin('This file is created by zhaoda')
        ]
    }
}

3.運行webpack

// 能夠在bundle.js的頭部看到註釋信息
/*! This file is created by zhaoda */

開發環境

webpack 

--progress : 顯示編譯的進度

--colors ：　帶顏色顯示，美化輸出

--watch　：　開啓監視器，不用每次變化後都手動編譯

12.4.7.1. webpack-dev-server

開啓服務,以監聽模式自動運行

1.安裝包

npm install webpack-dev-server -g --save-dev

2.啓動服務

實時監控頁面並自動刷新

webpack-dev-server --progress --colors

自動編譯

1.安裝插件

npm install --save-dev html-webpack-plugin

2.在配置文件中導入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
        //添加註釋的插件
        new webpack.BannerPlugin('This file is created by zhaoda'),
        //自動編譯
        new htmlWebpackPlugin({
            title: "index",
            filename: 'index.html', //在內存中生成的網頁的名稱
            template: './index.html' //生成網頁名稱的依據
        })
    ]

4.運行項目