0

一直想使用webpack,可是对于多页面开发貌似不是很友好,虽然现在主流是SPA,可是我目前还是以多页面为主,如果要用webpack该如何去解决多个入口文件的打包,可能是十几个

3个回答

0

多页面打包我以前也试过,感觉用处不是很大,一般的好处是:

  1. 对于复用的js和css,可以打包到同一个js文件中

  2. 可以使用require方便地加载依赖

其他的好处也有,我暂时说不上来。
对新手来说,坏处也不少,首先就是操作性问题,你搞懂这样一套webpack配置的时间,足够你去不用工具开发了

还有就是如果有多个js文件,那么就得打包成多个js,然后给每个页面分别引入,要是在js中引用图片啥的,还得处理一下资源的路径问题,总的来说,不是很容易。当然,也可能是我水平不行,弄麻烦了。
多页面想要打包并且复用代码段的话,可以考虑一下百度的fis,也是一个打包工具

0

在webpack配置中,写一段处理逻辑,遍历你所有的页面入口,添加到打包配置中。例如下面的示例配置是我以前的一个多项目的配置,我的项目中每个文件夹对应一个HTML页面,使用html-webpack-plugin插件基于项目中的index.html模板文件生成最终的各个入口html文件,供你参考:

var webpack = require('webpack');
var path = require("path")
var fs = require('fs');

var option = {
    context: path.resolve('./src/'),
    entry: {
        common: ['babel-polyfill']
    },
    output: {
        path: path.resolve('./dist'),
        filename: 'res/[name]/index_[chunkhash:8].js'
    },
    //......省略
};

var html = require('html-webpack-plugin');

//关键地方:读取源码目录,自动把目录下的各个页面入口加入到config里
fs.readdirSync(option.context)
    .filter(entry => fs.statSync(path.join(option.context, entry)).isDirectory())
    .forEach(entry => {
        option.entry[entry] = ['./' + entry];
        option.plugins.push(new html({
            template: entry + '/index.html',     //把 webpack/[entry]/index.html
            filename: entry + '.html',           //copy 到 dist/[entry].html
            chunks: ['common', entry]            //并且自动加入common.js和[entry].js的引用
        }));
    })
    
//导出
module.exports = option;    
    
0

没有要解决的问题,现在一切工作得很好,为什么要给自己找麻烦呢?

撰写答案