快捷導(dǎo)航

WebPack工具運(yùn)行原理及入門(mén)教程

更新時(shí)間：2020年12月02日 15:54:30 作者：hutou

這篇文章主要介紹了WebPack工具運(yùn)行原理及入門(mén)教程,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

WebPack是什么

一個(gè)打包工具
一個(gè)模塊加載工具
各種資源都可以當(dāng)成模塊來(lái)處理
網(wǎng)站 http://webpack.github.io/

如今，越來(lái)越多的JavaScript代碼被使用在頁(yè)面上，我們添加很多的內(nèi)容在瀏覽器里。如何去很好的組織這些代碼，成為了一個(gè)必須要解決的難題。

對(duì)于模塊的組織，通常有如下幾種方法：

通過(guò)書(shū)寫(xiě)在不同文件中，使用script標(biāo)簽進(jìn)行加載
CommonJS進(jìn)行加載（NodeJS就使用這種方式）
AMD進(jìn)行加載（require.js使用這種方式）
ES6模塊

思考：為什么只有JS需要被模塊化管理，前臺(tái)的很多預(yù)編譯內(nèi)容，不需要管理嗎？

基于以上的思考，WebPack項(xiàng)目有如下幾個(gè)目標(biāo)：

將依賴樹(shù)拆分，保證按需加載
保證初始加載的速度
所有靜態(tài)資源可以被模塊化
可以整合第三方的庫(kù)和模塊
可以構(gòu)造大系統(tǒng)

從下圖可以比較清晰的看出WebPack的功能

這是一個(gè)示意圖

WebPack的特點(diǎn)

豐富的插件，方便進(jìn)行開(kāi)發(fā)工作
大量的加載器，包括加載各種靜態(tài)資源
代碼分割，提供按需加載的能力
發(fā)布工具

WebPack的優(yōu)勢(shì)

webpack 是以 commonJS 的形式來(lái)書(shū)寫(xiě)腳本滴，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
能被模塊化的不僅僅是 JS 了。
開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React 熱插拔（見(jiàn) react-hot-loader ）的功能讓人眼前一亮。

WebPack的安裝

安裝命令

$ npm install webpack -g

使用webpack

$ npm init # 會(huì)自動(dòng)生成一個(gè)package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中

可以使用不同的版本

$ npm install webpack@1.2.x --save-dev

如果想要安裝開(kāi)發(fā)工具

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

WebPack的配置

每個(gè)項(xiàng)目下都必須配置有一個(gè) webpack.config.js ，它的作用如同常規(guī)的 gulpfile.js/Gruntfile.js ，就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么。

下面是一個(gè)例子

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件項(xiàng)
  plugins: [commonsPlugin],
  //頁(yè)面入口文件配置
  entry: {
    index : './src/js/page/index.js'
  },
  //入口文件輸出配置
  output: {
    path: 'dist/js/page',
    filename: '[name].js'
  },
  module: {
    //加載器配置
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' },
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  //其它解決方案配置
  resolve: {
    root: 'E:/github/flux-example/src', //絕對(duì)路徑
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

plugins 是插件項(xiàng)，這里我們使用了一個(gè) CommonsChunkPlugin的插件，它用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè) common.js 來(lái)方便多頁(yè)面之間進(jìn)行復(fù)用。

entry 是頁(yè)面入口文件配置，output 是對(duì)應(yīng)輸出項(xiàng)配置（即入口文件最終要生成什么名字的文件、存放到哪里）

module.loaders 是最關(guān)鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來(lái)處理。所有加載器需要使用npm來(lái)加載

最后是 resolve 配置，配置查找模塊的路徑和擴(kuò)展名和別名（方便書(shū)寫(xiě)）

WebPack開(kāi)始使用

這里有最基本的使用方法，給大家一個(gè)感性的認(rèn)識(shí)

正確安裝了WebPack，方法可以參考上面

書(shū)寫(xiě)entry.js文件

document.write("看看如何讓它工作！");

書(shū)寫(xiě)index.html文件

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

執(zhí)行命令，生成bundle.js文件

$ webpack ./entry.js bundle.js

在瀏覽器中打開(kāi)index.html文件，可以正常顯示出預(yù)期

增加一個(gè)content.js文件

module.exports = "現(xiàn)在的內(nèi)容是來(lái)自于content.js文件！";

修改entry.js文件

document.write(require("./content.js"));

執(zhí)行第四步的命令

進(jìn)行加載器試驗(yàn)

增加style.css文件

body {
background: yellow;
}

修改entry.js文件

require("!style!css!./style.css");
document.write(require("./content.js"));

執(zhí)行命令，安裝加載器
$ npm install css-loader style-loader # 安裝的時(shí)候不使用 -g

執(zhí)行webpack命令，運(yùn)行看效果

可以在命令行中使用loader

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

使用配置文件

默認(rèn)的配置文件為webpack.config.js

增加webpack.config.js文件

module.exports = {
 entry: "./entry.js",
 output: {
   path: __dirname,
   filename: "bundle.js"
 },
 module: {
   loaders: [
     { test: /\.css$/, loader: "style!css" }
   ]
 }
};

執(zhí)行程序

$ webpack

發(fā)布服務(wù)器

安裝服務(wù)器