webpack app是什么意思（webpack多页面配置，谁有比较全的理解）

本文目录

• webpack多页面配置，谁有比较全的理解
• 用webpack打包出来的怎么做成混合app
• webpack build后生成的app，vendor，manifest三者有何职能不同
• webpack如何实现多个app间共享组件

webpack多页面配置，谁有比较全的理解

需求
来看下我们的需求:
使用webpack-dev-server做开发时的服务器
在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html
打包成多个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;
entries = ’./’ + filepath;
});
return entries;
}
var entries = getEntries(’src/view/**/index.js’);
Object.keys(entries).forEach(function(name) {
// 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
webpackConfig.entry;
// 每个页面生成一个html
var plugin = new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: name + ’.html’,
// 每个html的模版，这里多个页面使用同一个模版
template: ’./template.html’,
// 自动将引用插入html
inject: true,
// 每个html引用的js模块，也可以在这里加上vendor等公用模块
chunks:
});
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;
}

用webpack打包出来的怎么做成混合app

这个任务并不是webpack可以胜任的，虽然webpackcover了一部分gulp/grunt的职能，但是不要忘了webpack的名字，它主要功能还是在于package，所以还是使用gulp/grunt进行上传吧，至于打包的task可以使用gulp-webpack这类插件来调用webpack。

webpack build后生成的app，vendor，manifest三者有何职能不同

item表示迭代的参数 比如你的这个数组通过request.setAttribute("array",xxx)放入了这个里，迭代的内容就是${requestScope.array}
var 相当于一个引用
下面你就可以用
${array.xxx1}
${array.xxx2}
将数组里的值输出出来了

webpack如何实现多个app间共享组件

修改了一些东西，因为sh脚本不能再window电脑执行，所以改成了node脚本。这是基于vue-cli2.0配置的，3.0的也是同样的道理。
我现在的项目改成vue-cli3.0的了，实现了一个工程多项目共用一些资源，但是打包的时候只打包一个项目，并且每个项目也可以配置多页面，并且实现了自动化上传到测试服务器（生产没权限）和静态资源分离，一行命令就可以打包项目并且把静态资源上传到一个服务器，而html文件上传到另一个服务器。
projectA,projectB,projectC是三个业务上没有关系的三个项目，但是可以共用一些公用的组件、公用工具类、公用样式等。
要实现npm run dev/build projectA 编译打包的时候，只编译打包项目projectA，而projectB和projectC不会编译打包进来。
实现npm run dev/build + 项目名字编译打包对应的项目