首頁 > 文章 > web前端 > webpack--模組打包器詳解

webpack--模組打包器詳解

零下一度原創: 2017-06-26 09:48:371971瀏覽

前面的話

　　在webpack出現之前，市面上已經存在的模組管理和打包工具並不適合大型的項目，尤其單頁 Web 應用程式。最迫切的原因是如何在一個大規模的程式碼庫中，維護各種模組資源的分割和存放，維護它們之間的依賴關係，並且無縫的將它們整合到一起生成適合瀏覽器端請求加載的靜態資源。 webpack是當下最熱門的前端資源模組化管理與包裝工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。也可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入

　　webpack的內容豐富且雜亂，對於新手並不友善。本文以一個實例的形式，對webpack的重要概念進行介紹，並著重說明如何使用webpack

概述

　　webpack是個模組打包器。

【特點】

　　webpack有以下特點

#程式碼分割

　　webpack 有兩種組織模組依賴的方式，同步和異步。非同步依賴作為分割點，形成一個新的區塊。在優化了依賴樹後，每個非同步區塊都作為一個檔案被打包。

Loader

　　Webpack 本身只能處理原生的 JavaScript 模組，但 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模組。這樣，任何資源都可以成為 Webpack 可以處理的模組。

智慧解析

　　Webpack 有一個智慧解析器，幾乎可以處理任何第三方函式庫，無論它們的模組形式是 CommonJS、 AMD 還是普通的 JS 檔案。甚至在載入依賴的時候，允許使用動態表達式 require("./templates/" + name + ".jade")。

外掛系統

　　Webpack 還有一個功能豐富的外掛系統。大多數內容功能都是基於這個插件系統運作的，還可以開發和使用開源的 Webpack 插件，來滿足各式各樣的需求。

快速運行

　　Webpack 使用非同步I/O 和多層快取提高運行效率，這使得Webpack 能夠以令人難以置信的速度快速增量編譯

【安裝】

　　用npm 安裝Webpack

$ npm install webpack

　　一個常見的問題是：安裝webpack後，無法使用webpack指令

　　這是因為只進行了本機安裝，沒有全域安裝，輸入如下程式碼進行全域安裝後即可執行

$ npm install webpack -g

使用

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

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

// entry.jsdocument.write('It works.')

　　然後編譯entry.js 並打包到bundle.js：

$ webpack entry.js bundle.js

　　打包過程會顯示日誌：<pre class="brush:php;toolbar:false">Hash: f47511e706e3de8f2417 Version: webpack 2.6.1Time: 47ms Asset Size Chunks Chunk Names bundle.js 2.66 kB 0 [emitted] main [0] ./entry.js 27 bytes {0} [built]</pre>

　　用瀏覽器開啟

index.html

將會看到

It works.

　　接下來加入一個模組

module.js

並修改入口

entry.js

：

<pre class="brush:php;toolbar:false">// module.jsmodule.exports = 'It works from module.js.'</pre><pre class="brush:php;toolbar:false">// entry.jsdocument.write('It works.') document.write(require('./module.js')) // 添加模块</pre>

　　重新打包

webpack entry.js bundle.js

後重新整理頁面看到變更

It works.It works from module. js.

Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1Time: 61ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.83 kB       0  [emitted]  main
   [0] ./module.js 43 bytes {0} [built]
   [1] ./entry.js 75 bytes {0} [built]

　　Webpack會分析入口文件，解析包含依賴關係的各個文件。這些檔案（模組）都打包到 bundle.js 。 Webpack 會為每個模組指派一個唯一的 id 並透過這個 id 索引和存取模組。當頁面啟動時，會先執行entry.js 中的程式碼，其它模組會在執行

require

的時候再執行

Loader

# Webpack 本身只能處理JavaScript 模組，如果要處理其他類型的文件，就需要使用loader 進行轉換。 　　Loader 可以理解為是模組和資源的轉換器，它本身是一個函數，接受原始檔案作為參數，並返回轉換的結果。詳細資料移步至此

　　接上面的例子，我們要在頁面中引入一個CSS檔案style.css，要使用require("!style-loader!css-loader!./style.css?1.1 .11")程式碼，程式碼讀取順序從右向左，表示首頁將style.css 也看成是一個模組，先載入style.css，然後用

css-loader

來讀取它，再用

style-loader

把它插入到頁面中

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

　　修改entry.js：

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

######　　安裝loader ：######

npm install css-loader style-loader

###

　　重新编译打包，刷新页面，就可以看到黄色的页面背景了

　　如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

　　将 entry.js 中的 require("!style-loader!css-loader!./style.css?1.1.11") 修改为 require("./style.css?1.1.11") ，然后执行

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

　　显然，这两种使用 loader 的方式，效果是一样的

配置

　　Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config选项来指定配置文件。

　　继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1"
  }
}

　　别忘了运行 npm install。然后创建一个配置文件 webpack.config.js，在下面的配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。相当于告诉webpack compiler，碰到「在require()/import语句中被解析为'.css'的路径」时，在把它们添加并打包之前，要先使用css-loader后使用style-loader去转换

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  }
}

　　同时简化 entry.js 中的 style.css 加载方式：

require('./style.css');

　　最后运行 webpack，可以看到 webpack 通过配置文件执行的结果和上一节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的

　　如果配置文件并不叫做默认的webpack.config.js，而是其他的名称，如test.js，则需要设置如下命令进行打包

webpack --config test.js

插件

　　插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。详细信息移步至此

　　想要使用一个插件，只需要require()它，然后把它添加到plugins数组中。内置插件则不需要require，直接使用即可

　　接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

　　修改 webpack.config.js，添加 plugins：

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [new webpack.BannerPlugin('This file is created by xiaohuochai')
  ]
}

　　然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/  // The module cache/******/  var installedModules = {};// 后面代码省略

开发环境

　　当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色

$ webpack --progress --colors

　　如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的

$ webpack --progress --colors --watch

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为红色，不用重新编译，刷新页面后，页面即发生改变

　　当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

# 安装
$ npm install webpack-dev-server -g

# 运行
$ webpack-dev-server --progress --colors

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为蓝色，不用重新编译，也不用刷新页面，页面即发生改变

以上是webpack--模組打包器詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：require的五種用法介紹下一篇：require的五種用法介紹

看更多