首頁 > web前端 > js教程 > 主體

webpack建立多頁面應用程式的步驟分析

php中世界最好的语言
發布: 2018-04-14 10:25:39
原創
1896 人瀏覽過

這次帶給大家webpack建構多頁面應用的步驟分析,webpack建構多頁面應用的注意事項有哪些,下面就是實戰案例,一起來看一下。

關於webpack的設定和使用,網路上已經有許多文章了,大多是在講單頁應用,當我們需要打包多個html時,事情就變得麻煩起來。怎麼在webpack-dev-server裡使用路由?怎麼打包多個html和js chunk並自動更新md5?本文講的就是如何解決這些問題。

這裡假設你對Webpack已經有最基礎的了解

需求

來看我們的需求:

  1. 使用webpack-dev-server做開發時的伺服器

  2. 在webpack-dev-server裡使用路由,訪問/a時候顯示a.html,/b顯示b.html

  3. 打包成多個html,給其中引用到資源加md5戳

主要目錄結構

├── src            
│  └── views         # 每一个文件夹对应一个页面
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # 打包输出的目录
|  └── ...
└── template.html       # 将根据这个模版,生成各个页面的html
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express
登入後複製

只列出了主要的目錄,這裡我們根據一個template.html來產生多個頁面的html,他們之間只有引用的資源路徑不同。當然,你也可以每個頁面單獨使用一個html模版。

Webpack 設定

# 這裡主要解決兩個小問題。

1. 打包多個頁面的js檔案

讀取src/views下的目錄,約定每一個目錄當成一個頁面,打包成一個js chunk。

2. 打包多個html

循環生成多個HtmlWebpackPlugin插件,把每個插件的chunks各自指向上面打包的js chunk。

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* 一些webpack基础配置 */  
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // 取倒数第二层(view下面的文件夹)做包名
     var split = filepath.split('/');
     var name = split[split.length - 2];
     entries[name] = './' + filepath;
   });
   return entries;
}   
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
  // 每个页面生成一个entry,如果需要HotUpdate,在这里修改entry
  webpackConfig.entry[name] = entries[name];
  
  // 每个页面生成一个html
  var plugin = new HtmlWebpackPlugin({
    // 生成出来的html文件名
    filename: name + '.html',
    // 每个html的模版,这里多个页面使用同一个模版
    template: './template.html',
    // 自动将引用插入html
    inject: true,
    // 每个html引用的js模块,也可以在这里加上vendor等公用模块
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
})
登入後複製

路由設定

在多頁應用程式下,我們希望造訪的是localhost:8080/a,而不是localhost:8080/a.html。

由於webpack-dev-server只是將檔案打包在記憶體裡,所以你沒辦法在express裡直接sendfile('output/views/a.html'),因為這個檔案其實還不存在。還好webpack提供了一個outputFileStream,用來輸出其記憶體裡的文件,我們可以利用它來做路由。

注意,為了自定義路由,你可能需要引進express或koa之類的函式庫,然後將webpack-dev-server當作中間件處理。

// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
});
app.use(devMiddleware)
// 路由
app.get('/:viewname?', function(req, res, next) {
  
  var viewname = req.params.viewname 
    ? req.params.viewname + '.html' 
    : 'index.html';
    
  var filepath = path.join(compiler.outputPath, viewname);
  
  // 使用webpack提供的outputFileSystem
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // something error
      return next(err);
    }
    res.set('content-type', 'text/html');
    res.send(result);
    res.end();
  });
});
module.exports = app.listen(8080, function(err) {
  if (err) {
    // do something
    return;
  }
  
  console.log('Listening at http://localhost:' + port + '\n')
})
登入後複製

最後,在package.json裡定義下啟動指令:

// package.json
{
  scripts: {
    "dev": "node ./dev-server.js"  
  }
}
登入後複製

執行npm run dev,然後在瀏覽器存取localhost:8080/各個頁面,你應該可以看到你想要的結果。                 

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

ajax直接改變狀態和刪除無刷新狀態

vue使用axios時this指向哪裡

JS的多執行緒運行庫Nexus.js使用詳解

#

以上是webpack建立多頁面應用程式的步驟分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板