webpack壓縮js代碼，webpack多個Html,使用webpack構建多頁面應用

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

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

需求

來看下我們的需求:

使用webpack-dev-server做開發時的服務器

webpack壓縮js代碼、在webpack-dev-server里使用路由，訪問/a時候顯示a.html，/b顯示b.html

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

主要目錄結構

├── src

│ └── views # 每一個文件夾對應一個頁面

│ └── a

webpack打包單個組件，│ └── index.js

│ └── b

│ └── index.js

├── output # 打包輸出的目錄

| └── ...

└── template.html # 將根據這個模版，生成各個頁面的html

webpack多頁面 分包。└── webpack.config.js

└── dev-server.js # webpack-dev-server + express

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

Webpack 配置

這里主要解決兩個小問題。

1. 打包多個頁面的js文件

vue 多頁面應用、讀取src/views下的目錄，約定每一個目錄當成一個頁面，打包成一個js chunk。

2. 打包多個html

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

// webpack.config.js

var glob = require('glob');

var webpackConfig = {

webpack4打包優化？/* 一些webpack基礎配置 */

};

// 獲取指定路徑下的入口文件

function getEntries(globPath) {

var files = glob.sync(globPath),

entries = {};

webpack-dev-middleware、files.forEach(function(filepath) {

// 取倒數第二層(view下面的文件夾)做包名

var split = filepath.split('/');

var name = split[split.length - 2];

entries[name] = './' + filepath;

});

webpack 源碼 css，return entries;

}

var entries = getEntries('src/view/**/index.js');

Object.keys(entries).forEach(function(name) {

// 每個頁面生成一個entry，如果需要HotUpdate，在這里修改entry

webpackConfig.entry[name] = entries[name];

webpack4新特性？// 每個頁面生成一個html

var plugin = new HtmlWebpackPlugin({

// 生成出來的html文件名

filename: name + '.html',

// 每個html的模版，這里多個頁面使用同一個模版

template: './template.html',

什么是webpack、// 自動將引用插入html

inject: true,

// 每個html引用的js模塊，也可以在這里加上vendor等公用模塊

chunks: [name]

});

webpackConfig.plugins.push(plugin);

webpack5。})

路由配置

在多頁應用下，我們希望訪問的是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

webpack多入口有什么用。var express = require('express')

var webpack = require('webpack')

var webpackConfig = require('./webpack.config')

var app = express();

// webpack編譯器

var compiler = webpack(webpackConfig);

webpack打包普通html？// webpack-dev-server中間件

var devMiddleware = require('webpack-dev-middleware')(compiler, {

publicPath: webpackConfig.output.publicPath,

stats: {

colors: true,

chunks: false

webpack配置跨域、}

});

app.use(devMiddleware)

// 路由

app.get('/:viewname?', function(req, res, next) {

var viewname = req.params.viewname

webpack搭建vue項目、? req.params.viewname + '.html'

: 'index.html';

var filepath = path.join(compiler.outputPath, viewname);

// 使用webpack提供的outputFileSystem

compiler.outputFileSystem.readFile(filepath, function(err, result) {

if (err) {

vue多頁面開發，// something error

return next(err);

}

res.set('content-type', 'text/html');

res.send(result);

res.end();

jquery使用webpack？});

});

module.exports = app.listen(8080, function(err) {

if (err) {

// do something

return;

html-webpack-plugin？}

console.log('Listening at http://localhost:' + port + '\n')

})

最后，在package.json里定義下啟動命令：

// package.json

{

scripts: {

"dev": "node ./dev-server.js"

}

}

運行 npm run dev，然后在瀏覽器訪問localhost:8080/各個頁面，你應該可以看到想要的結果。