欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解webpack模塊化管理和打包工具

 更新時(shí)間：2018年04月21日 09:23:16   投稿：zx  
這篇文章主要介紹了詳解webpack模塊化管理和打包工具,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本篇文章主要介紹了詳解webpack模塊化管理和打包工具，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Webpack簡介

webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際

需要的時(shí)候再異步加載。通過 loader  的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

模塊系統(tǒng)的演進(jìn)<script>標(biāo)簽

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

這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window  對象中，

不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來組織這些模塊的接口，典型的例子如 YUI  庫。

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

  1. 全局作用域下容易造成變量沖突
  2. 文件只能按照   <script>  的書寫順序進(jìn)行加載
  3. 開發(fā)人員必須主觀解決模塊和代碼庫的依賴關(guān)系
  4. 在大型項(xiàng)目中各種資源難以管理，長期積累的問題導(dǎo)致代碼庫混亂不堪

CommonJS規(guī)范

CommonJS 是以在瀏覽器環(huán)境之外構(gòu)建 JavaScript 生態(tài)系統(tǒng)為目標(biāo)而產(chǎn)生的項(xiàng)目，比如在服務(wù)器和桌面環(huán)境中。

CommonJS 規(guī)范是為了解決 JavaScript 的作用域問題而定義的模塊形式，可以使每個(gè)模塊它自身的命名空間中執(zhí)行。該規(guī)范的主要內(nèi)容是，模塊必須通過 module.exports  導(dǎo)出對外的變量 或接口，通過   require()  來導(dǎo)入其他模塊的輸出到當(dāng)前模塊作用域中。

一個(gè)直觀的例子

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

AMD規(guī)范

AMD（異步模塊定義）是為瀏覽器環(huán)境設(shè)計(jì)的，因?yàn)?CommonJS 模塊系統(tǒng)是同步加載的，當(dāng)前瀏覽器環(huán)境還沒有準(zhǔn)備好同步加載模塊的條件。

模塊通過 define  函數(shù)定義在閉包中，格式如下：

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

id  是模塊的名字，它是可選的參數(shù)。

factory  是最后一個(gè)參數(shù)，它包裹了模塊的具體實(shí)現(xiàn)，它是一個(gè)函數(shù)或者對象。如果是函數(shù)，那么它的返回值就是模塊的輸出接口或值。

一些用例

定義一個(gè)名為 myModule  的模塊，它依賴   jQuery  模塊：

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

注意 ：在 webpack 中，模塊名只有局部作用域，在 Require.js 中模塊名是全局作用域，可以在全局引用。

定義一個(gè)沒有 id  值的匿名模塊，通常作為應(yīng)用的啟動(dòng)函數(shù)：

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

AMD 也采用require()語句加載模塊，但不同于CommonJS,他要求兩個(gè)參數(shù)

第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊； 第二個(gè)參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫成AMD形式，就是下面這樣：

math.add()與math模塊加載不是同步的，瀏覽器不會(huì)發(fā)生假死。所以很顯然，AMD比較適合瀏覽器環(huán)境

目前，主要有兩個(gè)Javascript庫實(shí)現(xiàn)了AMD規(guī)范： require.js 和 curl.js

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

什么是 Webpack

Webpack 是一個(gè)模塊打包器。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

Webpack 的特點(diǎn)

  1. 代碼拆分
  2. Loader
  3. 智能解析
  4. 插件系統(tǒng)
  5. 快速運(yùn)行

webpack基本使用

創(chuàng)建項(xiàng)目根目錄

初始化

npm init 或 npm init -y

全局安裝

npm install webpack -g

局部安裝,在項(xiàng)目目錄下安裝

npm install webpack --save-dev

--save: 將安裝的包的信息保存在package中

--dev:開發(fā)版本,只是項(xiàng)目構(gòu)建的時(shí)候使用,項(xiàng)目構(gòu)建完成后并不依賴的文件

如果使用web開發(fā)工具,單獨(dú)安裝

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

基本使用

首先創(chuàng)建一個(gè)靜態(tài)頁面 index.html 和一個(gè) JS 入口文件 entry.js：

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

創(chuàng)建entry.js

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

然后編譯 entry.js并打包到 bundle.js文件中

// 使用npm命令 
webpack entry.js bundle.js

使用模塊

1.創(chuàng)建模塊module.js,在內(nèi)部導(dǎo)出內(nèi)容

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.創(chuàng)建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'))

創(chuàng)建配置文件webpack.config.js

1.創(chuàng)建文件

var webpack = require('webpack')

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

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

3.運(yùn)行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: [
      //同時(shí)簡化 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.運(yùn)行webpack

// 可以在bundle.js的頭部看到注釋信息
/*! This file is created by zhaoda */

開發(fā)環(huán)境

webpack

--progress : 顯示編譯的進(jìn)度

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

--watch?。骸￠_啟監(jiān)視器，不用每次變化后都手動(dòng)編譯

12.4.7.1. webpack-dev-server

開啟服務(wù),以監(jiān)聽模式自動(dòng)運(yùn)行

1.安裝包

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

2.啟動(dòng)服務(wù)

實(shí)時(shí)監(jiān)控頁面并自動(dòng)刷新

webpack-dev-server --progress --colors

自動(dòng)編譯

1.安裝插件

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

2.在配置文件中導(dǎo)入包

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

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

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

4.運(yùn)行項(xiàng)目

webpack--save-dev

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論