• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

webpack多页面配置,多入口

代码碎片 新概念 8个月前 (11-29) 841次浏览 0个评论 扫描二维码

多页打包的原因

首先发出一个直击灵魂的拷问:为什么要多页面打包?

习惯了 React,Vue 全家桶的同学,可能觉得写代码不就是:npm run dev npm run build一把梭吗?

然而现实是骨感的,很多场景下,单页应用的开发模式并不适用。比如公司经常开发一些活动页:

https://www.demo.com/activity/activity1.html https://www.demo.com/activity/activity2.html https://www.demo.com/activity/activity3.html

上述三个页面是完全不相干的活动页,页面之间并没有共享的数据。然而每个页面都使用了 React 框架,并且三个页面都使用了通用的弹框组件。在这种场景下,就需要使用 webpack 多页面打包的方案了:

  1. 保留了传统单页应用的开发模式:使用 Vue,React 等前端框架(当然也可以使用 jQuery),支持模块化打包,你可以把每个页面看成是一个单独的单页应用
  2. 独立部署:每个页面相互独立,可以单独部署,解耦项目的复杂性,你甚至可以在不同的页面选择不同的技术栈

因此,我们可以把多页应用看成是乞丐版的前端微服务

多页面打包的原理

首先我们约定: src/pages目录下,每个文件夹为单独的一个页面。每个页面至少有两个文件配置:

  • app.js: 页面的逻辑入口
  • index.html: 页面的 html 打包模板
src/pages
├── page1
│   ├── app.js
│   ├── index.html
│   ├── index.scss
└── page2
    ├── app.js
    ├── index.html
    └── index.scss

前面我们说过:每个页面可以看成是个独立的单页应用

单页应用怎么打包的?单页应用是通过配置 webpack 的的 entry

module.exports = {
  entry: './src/main.js', // 项目的入口文件,webpack 会从 main.js 开始,把所有依赖的 js 都加载打包
  output: {
      path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
      filename: 'build.js' // 打包后的文件名
  }
};

因此,多页应用只需配置多个 entry 即可

module.exports = {
  entry: {
    'page1': './src/pages/page1/app.js', // 页面 1
    'page2': './src/pages/page2/app.js', // 页面 2
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name]/[name]-bundle.js', // filename 不能写死,只能通过[name]获取 bundle 的名字
  }
}

同时,因为多页面的 index.html 模板各不相同,所以需要配置多个 HtmlWebpackPlugin。

注意:HtmlWebpackPlugin一定要配chunks,否则所有页面的 js 都会被注入到当前 html 里

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(
    {
      template: './src/pages/page1/index.html',
      chunks: ['page1'],
    }
  ),
  new HtmlWebpackPlugin(
    {
      template: './src/pages/page2/index.html',
      chunks: ['page2'],
    }
  ),
  ]
}

多页面打包的原理就是:配置多个entry和多个HtmlWebpackPlugin

多页打包的细节

代码分割

  1. 把多个页面共用的第三方库(比如 React,Fastclick)单独打包出一个vendor.js
  2. 把多个页面共用的逻辑代码和共用的全局 css(比如 css-reset,icon 字体图标)单独打包出common.jscommon.css
  3. 把运行时代码单独提取出来manifest.js
  4. 把每个页面自己的业务代码打包出page1.jspage1.css

前 3 项是每个页面都会引入的公共文件,第 4 项才是每个页面自己单独的文件。

实现方式也很简单,配置optimization即可:

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 打包业务中公共代码
        common: {
          name: "common",
          chunks: "initial",
          minSize: 1,
          priority: 0,
          minChunks: 2, // 同时引用了 2 次才打包
        },
        // 打包第三方库的文件
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial",
          priority: 10,
          minChunks: 2, // 同时引用了 2 次才打包
        }
      }
    },
    runtimeChunk: { name: 'manifest' } // 运行时代码
  }
}

hash

最后打包出来的文件,我们希望带上 hash 值,这样可以充分利用浏览器缓存。webpack 中有hashchuckhashcontenthash:生产环境时,我们一般使用contenthash,而开发环境其实可以不指定 hash。

// dev 开发环境
module.exports = {
  output: {
    filename: 'js/[name]/[name]-bundle.js',
    chunkFilename: 'js/[name]/[name]-bundle.js',
  },
}

// prod 生产环境
module.exports = {
  output: {
    filename: 'js/[name]/[name]-bundle.[contenthash:8].js',
    chunkFilename: 'js/[name]/[name]-bundle.[contenthash:8].js',
  },
}

mock 和 proxy

开发环境,通常需要 mock 数据,还需要代理 api 到服务器。我们可以通过devServer配合mocker-api第三方库实现。

const apiMocker = require('mocker-api');

// dev 开发环境
module.exports = {
  devServer: {
    before(app) { // 本地 mock 数据
      apiMocker(app, path.resolve(__dirname, '../mock/index.js'))
    },
    proxy: { // 代理接口
      '/api': {
        target: 'https://anata.me', // 后端联调地址
        changeOrigin: true,
        secure: false,
      },
    }
  },
}

拆分 webpack 配置

为了通用配置,把 webpack 的配置文件分成 3 份。

build
├── webpack.base.js // 共用部分
├── webpack.dev.js // dev
└── webpack.prod.js // 生产

devprod配置的主要区别:

dev配置devServer,方便本地调试开发

prod打包压缩文件,单独提取 css (dev 不提取是为了 css 热更新),生成静态资源清单manifest.json

关于为什么要生成一份manifest.json,以及打包后的代码如何部署,我将会在下一篇文章详情介绍。

总结

webpack 的学习始终是前端绕不过去的一道坎。通过这次从零搭建多页面打包模板,也算是巩固了一下基础知识,离webpack 配置工程师又近了一步。


以上是 vue 官方推荐方案,一下是手动实现方案。

注意

  • 弃用 npm run build & npm run dev & npm run dll
  • 改成 box build & box dev & box dll
  • link npm link 将 box 命令链接到全局

本章内容

  1. 使用
  2. 改造为脚手架
  3. 多页面配置

使用

box build # 不加参数则会编译所有页面,并清空 dist
box dev   # 默认编译 index 页面

参数

# index2 是指定编译的页面。不会清空 dist
# report 开启打包分析
box build index2 --report
box dev index2 --report

改造为脚手架

分成三个命令,进行不同操作

  • build
  • dev
  • dll

webpack 工程师的自我修养:多页面配置

bin/box.js

#!/usr/bin/env node

const chalk = require("chalk");
const program = require("commander");
const packageConfig = require("../package.json");
const { cleanArgs } = require("../lib");
const path = require("path");
const __name__ = `build,dev,dll`;

let boxConf = {};
let lock = false;

try {
  boxConf = require(path.join(process.cwd(), "box.config.js"))();
} catch (error) {}

program
  .usage("<command> [options]")
  .version(packageConfig.version)
  .command("build [app-page]")
  .description(`构建开发环境`)
  .option("-r, --report", "打包分析报告")
  .option("-d, --dll", "合并差分包")
  .action(async (name, cmd) => {
    const options = cleanArgs(cmd);
    const args = Object.assign(options, { name }, boxConf);
    if (lock) return;
    lock = true;
    if (boxConf.pages) {
      Object.keys(boxConf.pages).forEach(page => {
        args.name = page;
        require("../build/build")(args);
      });
    } else {
      require("../build/build")(args);
    }
  });

program
  .usage("<command> [options]")
  .version(packageConfig.version)
  .command("dev [app-page]")
  .description(`构建生产环境`)
  .option("-d, --dll", "合并差分包")
  .action(async (name, cmd) => {
    const options = cleanArgs(cmd);
    const args = Object.assign(options, { name }, boxConf);
    if (lock) return;
    lock = true;
    require("../build/dev")(args);
  });

program
  .usage("<command> [options]")
  .version(packageConfig.version)
  .command("dll [app-page]")
  .description(`编译差分包`)
  .action(async (name, cmd) => {
    const options = cleanArgs(cmd);
    const args = Object.assign(options, { name }, boxConf);
    if (lock) return;
    lock = true;
    require("../build/dll")(args);
  });

program.parse(process.argv).args && program.parse(process.argv).args[0];
program.commands.forEach(c => c.on("--help", () => console.log()));

if (process.argv[2] && !__name__.includes(process.argv[2])) {
  console.log();
  console.log(chalk.red(`  没有找到 ${process.argv[2]} 命令`));
  console.log();
  program.help();
}

if (!process.argv[2]) {
  program.help();
}

 

多页面配置

box.config.js

module.exports = function(config) {
  return {
    entry: "src/main.js", // 默认入口
    dist: "dist", // 默认打包目录
    publicPath: "/",
    port: 8888,
    pages: {
      index: {
        entry: "src/main.js",
        template: "public/index.html",
        filename: "index.html"
      },
      index2: {
        entry: "src/main.js",
        template: "public/index2.html",
        filename: "index2.html"
      }
    },
    chainWebpack(config) {}
  };
};

 


新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:webpack多页面配置,多入口
喜欢 (2)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址