vue+webpack4多页面打包配置

更新日期: 2019-03-04阅读: 3.2k标签: webpack

多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为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...

来自:https://segmentfault.com/a/1190000018381677


链接: https://fly63.com/article/detial/2217

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!