如何使用webpack模組化管理與打包工具

這次帶給大家如何使用webpack模組化管理與打包工具，使用webpack模組化管理與打包工具的注意事項有哪些，以下就是實戰案例，一起來看一下。

Webpack簡介

webpack是當下最熱門的前端資源模組化管理與包裝工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。也可以將按需載入的模組進行程式碼分隔，等到實際

需要的時候再非同步載入。透過 loader  的轉換，任何形式的資源都可以視為模組，例如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。

模組系統的演進<script>標籤</script>

<script></script>
<script></script>
<script></script>
<script></script>

這是最原始的JavaScript 檔案載入方式，如果把每個檔案看做是一個模組，那麼他們的介面通常是暴露在全域作用域下，也就是定義在window  物件中，

不同模組的介面呼叫都是一個作用域中，一些複雜的框架，會使用命名空間的概念來組織這些模組的接口，典型的例子如YUI  庫。

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

1. 全域作用域下容易造成變數衝突

2. 文件只能依照   <script>  的書寫順序進行載入</script>

3. 開發人員必須主觀解決模組和程式碼庫的依賴關係

4. 在大型專案中各種資源難以管理，長期累積的問題導致程式碼庫混亂不堪

#CommonJS規格

CommonJS 是以在瀏覽器環境之外建構JavaScript 生態系統為目標而產生的項目，例如在伺服器和桌面環境中。

CommonJS 規格是為了解決 JavaScript 的作用域問題而定義的模組形式，可以使每個模組它自己的命名空間中執行。此規範的主要內容是，模組必須透過 module.exports  導出對外的變數 或接口，透過   require()  導入其他模組的輸出到目前模組作用域。

一個直覺的範例

// 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 的特性

1. 程式碼拆分

2. Loader

   #

3. 智能解析

4. 插件系统

5. 快速运行

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 -->


<meta>


<script></script>

创建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.运行项目

webpack--save-dev

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

调用模式与this绑定

在实战项目中怎样使用jquery layur弹出层

以上是如何使用webpack模組化管理與打包工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！