vue+webpack4多页面打包配置

vue+webpack4多页面打包配置

多页面配置一般有两种形式，一种是多页面多配置，一种是多页面单配置。由于webpack（3.1以上）能够直接处理一个配置对象的数组，因此能够为每一个页面单独写一份配置。
 
一般来说，多配置的优势是配置灵活、独立，能够并行打包，从而提升打包速度，缺点是不能在多页面之间共享代码（一个页面加载了以后，下一个页面还得再加载一遍）；单配置的特色基本上是和多配置相对。具体使用哪种形式，看具体业务状况。本文主要介绍的是单配置的形式。
 

1. 总体目录结构

为了便于打包，咱们建立一个pages的文件夹，在其下建立一个个的子文件夹表明一个个页面，每一个子文件夹中创建各自的spa应用体系，如图所示：

这样作的好处是，咱们在配置webpack的打包入口时，比较好操做，并且这样的结构也较为清晰。
 

2. webpack配置

2.1 文件结构

建立base、dev、prod三个文件。咱们在base文件中配置entry、output、loader、公共的plugin等，其他的根据开发环境和线上环境各自所需在各自不一样的文件中增删改。

2.2 entry

根据总体目录结构，每一个页面文件夹都有各自的入口js文件，咱们在配置entry选项时，就能够按以下编码方式书写：

/**
 * 经过约定，下降编码复杂度
 * 每新增一个入口，即在src/pages目录下新增一个文件夹，以页面名称命名，内置一个index.js做为入口文件
 * 经过node的文件api扫描pages目录
 * 这样能够获得一个形如{page1: "入口文件地址", page2: "入口文件地址", ...}的对象
 */
const getEntries = () => {
    let result = fs.readdirSync(pagesDirPath);
    let entry = {};
    result.forEach(item => {
        entry[item] = path.resolve(__dirname, `../src/pages/${item}/index.js`);
    });
    return entry;
}

module.exports = {
    entry: getEntries()
    
    ...
}

2.3 output

output的配置选项以下，打完包后的目录结构如图所示：

//判断是不是开发环境
const devMode = process.env.NODE_ENV === "development"; 

module.exports = {
    ...
    
    output: {
        publicPath: devMode ? "" : "/",
        //这里的name即为咱们entry对象中的每个key值，也就是咱们在pages目录下建立的一个个文件夹的名称
        filename: devMode ? "[name].js" : "static/js/[name].[chunkhash].js",
        path: path.resolve(__dirname, "../dist")
    }
    
    ...
}

2.4 html-webpack-plugin

配置完了entry和output，接下来须要为每一个页面生成一个单独的html文件，也就是为每一个页面建立一个html-webpack-plugin的实例：

/**
 * 扫描pages文件夹，为每一个页面生成一个插件实例对象
 */
const generatorHtmlWebpackPlugins = () => {
    let arr = [];
    let result = fs.readdirSync(pagesDirPath);
    result.forEach(item => {
        //判断页面目录下有无本身的index.html
        let templatePath;
        let selfTemplatePath = pagesDirPath + `/${item}/index.html`;
        let publicTemplatePath = path.resolve(__dirname, "../src/public/index.html");
        try {
            fs.accessSync(selfTemplatePath);
            templatePath = selfTemplatePath;
        } catch(err) {
            templatePath = publicTemplatePath;
        }
        arr.push(new HtmlWebpackPlugin({
            template: templatePath,
            filename: `${item}.html`,
            chunks: ["manifest", "vendor", item]
        }));
    });
    return arr;
}

module.exports = {
    ...
    
    plugins: [
        ...generatorHtmlWebpackPlugins()
    ]
    
    ...
}

这里为了灵活性考虑，判断了各自的页面子文件夹中有无html模板文件；若是不须要，能够把templat路径直接定义成公共html文件的地址。

2.5 其余配置

基本上前面的几点配置就是一个多页面打包配置的雏形。此外还能够配置下诸如optimization、mini-css-extract-plugin等生产环境打包的优化配置。在文末的github地址中能够看到所有的配置信息。

3. 多页面+SPA

虽然咱们这是一个多页面的应用，但每一个页面也能够作成一个spa，若是你有这种需求的话；此外能够配置@babel/plugin-syntax-dynamic-import插件以支持import()，在router层面作代码分割和懒加载。

附

原文代码地址：https://github.com/gww666/2-m...