资讯专栏INFORMATION COLUMN

webpack 配置多页面应用的一次尝试

Mike617 / 1159人阅读

摘要:最近有一个项目,考虑到要进行,所以要做成多页面应用。为了保证开发速度和开发效率,所以决定使用做一套模块化配置方案。

</>复制代码

  1. 最近有一个项目,考虑到要进行 SEO,所以要做成多页面应用。为了保证开发速度和开发效率,所以决定使用 webpack 做一套模块化配置方案。

  2. 下面主要针对一些重要的点提供思路,并不作详解。完整的代码,我会放在 github(项目地址)上供大家参考,如果有优化的地方,请在评论区指点出来,。

目录

</>复制代码

  1. |-- build webpack 配置
  2. | |-- utils.js 处理 webpack 配置的公共方法
  3. | |-- webpack.base.conf.js 公共配置
  4. | |-- webpack.dev.conf.js 开发环境配置
  5. | |-- webapck.prod.conf.js 生产环境配置
  6. | |-- webpack.rules.conf.js 文件处理规则
  7. |-- dist 存放变异后文件
  8. |-- |
  9. |-- src 源文件
  10. | |-- assets
  11. | |-- pages
  12. | | |-- index 首页
  13. | | | |-- index.html 首页模板
  14. | | | |-- index.js 首页入口文件
  15. | htmlarrary.js 页面配置文件
多页面

多页面,首先最重要的就是处理多个 html 模板和对应的多个入口文件。

html 模板

在项目根目录创建一个 htmlarrary.js,用来存储页面配置:

</>复制代码

  1. // htmlarrary.js
  2. module.exports = [
  3. {
  4. _html: "index",
  5. title: "首页",
  6. chunks: ["index", "manifest", "vendors"] // 页面用到的vendor模块
  7. },
  8. {
  9. _html: "login",
  10. title: "登录",
  11. chunks: ["login"]
  12. }
  13. ]

然后在 /build/utils.js 创建 getHtmlArray 方法,用来自动生成多个模板的配置:

</>复制代码

  1. // /build/utils.js
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. const htmlArray = require("../htmlarray.js")
  4. exports.getHtmlArray = function (moduleExportsPlugins) {
  5. // 根据模板配置生成 HtmlWebpackPlugin 需要的配置
  6. const getHtmlConfig = function (name, chunks, title) {
  7. return {
  8. template: `./src/pages/${name}/index.html`,
  9. filename: `./${name}.html`,
  10. favicon: "./src/assets/images/public/favicon.ico",
  11. title,
  12. inject: true,
  13. hash: true, // 开启hash
  14. chunks, // 页面要引入的包
  15. minify: process.env.NODE_ENV === "development" ? false : {
  16. removeComments: true, // 移除HTML中的注释
  17. collapseWhitespace: true, // 折叠空白区域 也就是压缩代码
  18. removeAttributeQuotes: true, // 去除属性引用
  19. },
  20. };
  21. };
  22. // 循环创建模板配置
  23. htmlArray.forEach((element) => {
  24. const { _html, chunks, title } = element
  25. moduleExportsPlugins.push(new HtmlWebpackPlugin(getHtmlConfig(_html, chunks, title)))
  26. })
  27. }

webpack.base.conf.js 中通过 getHtmlArray 添加多页面引擎配置:

</>复制代码

  1. const { getHtmlArray } = require("./utils.js")
  2. module.exports = {
  3. // ... 相关配置
  4. }
  5. getHtmlArray(module.exports.plugins)
入口文件

/build/utils.js 创建 getEntry 方法,用来自动生成入口文件的配置:

</>复制代码

  1. // /build/utils.js
  2. const glob = require("glob")
  3. exports.getEntry = function () {
  4. const entry = {}
  5. // 读取src目录所有page入口
  6. glob.sync("./src/pages/*/*.js").forEach((name) => {
  7. const start = name.indexOf("src/") + 4;
  8. const end = name.length - 3;
  9. const eArr = [];
  10. const n = name.slice(start, end).split("/")[1];
  11. eArr.push(name);
  12. eArr.push("@babel/polyfill"); // 引入这个,是为了用async await,一些IE不支持的属性能够受支持,兼容IE浏览器用的
  13. entry[n] = eArr;
  14. })
  15. return entry;
  16. }

webpack.base.conf.js 中通过 getEntry 添加多入口配置:

</>复制代码

  1. // webpack.base.conf.js
  2. const { getEntry } = require("./utils.js")
  3. module.exports = {
  4. entry: getEntry(),
  5. }
JS

JS 方面,我们一般有以下需求:

eslint 错误提醒;

ts-loader 解析 typescript 语法;

babel-loader 解析 ES6 语法。

针对以上需求,我们来配置一下子 rules,并且做一下延伸:

</>复制代码

  1. // webpack.rules.conf.js
  2. module.exports = [
  3. {
  4. test: /.(js|ts)$/,
  5. exclude: /node_modules/,
  6. use: [
  7. {
  8. loader: "babel-loader",
  9. options: {
  10. presets: [
  11. ["@babel/preset-env", {
  12. useBuiltIns: "usage",
  13. targets: {
  14. chrome: "58",
  15. ie: "8"
  16. },
  17. corejs: 2
  18. }]
  19. ]
  20. }
  21. },
  22. {
  23. loader: "ts-loader"
  24. },
  25. {
  26. loader: "eslint-loader",
  27. options: {
  28. cache: true // 优化打包速度
  29. }
  30. }
  31. ]
  32. }
  33. ]

在生产环境,我们需要对 js 文件进行压缩,公共代码抽离,所以还需要在 webpack.prod.conf.js 中这样去优化一下:

</>复制代码

  1. // webpack.prod.conf.js
  2. cconst merge = require("webpack-merge")
  3. const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
  4. const baseConfig = require("./webpack.base.conf.js")
  5. const prodConfig = {
  6. optimization: {
  7. minimizer: [
  8. // 会导致 sourcemap 消失
  9. new UglifyJsPlugin({
  10. uglifyOptions: ({
  11. compress: false
  12. })
  13. }),
  14. new OptimizeCSSAssetsPlugin({})
  15. ],
  16. splitChunks: {
  17. chunks: "all",
  18. cacheGroups: {
  19. vendors: { // 抽离第三方插件
  20. test: /[/]node_modules[/]/, // 指定是node_modules下的第三方包
  21. name: "vendors",
  22. priority: -10 // 抽取优先级
  23. },
  24. utilCommon: { // 抽离自定义
  25. name: "common",
  26. minSize: 0, // 将引用模块分离成新代码文件的最小体积
  27. minChunks: 2, // 表示将引用模块如不同文件引用了多少次,才能分离生成新chunk
  28. priority: -20
  29. }
  30. }
  31. },
  32. // optimization.runtimeChunk 就是告诉 webpack 是否要把这部分多带带打包出来,来优化缓存问题
  33. runtimeChunk: {
  34. name: "manifest"
  35. }
  36. }
  37. }
  38. module.exports = merge(baseConfig, prodConfig)
CSS

CSS 方面,我们一般有以下需求:

postcss-loader 安装 autoprefixer 插件,自动进行兼容性处理;

sass-loader 解析 sass 语法;

MiniCssExtractPlugin 进行 css 压缩。

针对以上需求,我们来配置一下子 rules,并且做一下延伸:

</>复制代码

  1. // webpack.rules.conf.js
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  3. module.exports = [
  4. {
  5. test: /.scss$/i,
  6. use: [
  7. Object.assign(
  8. // 生产环境压缩 css 需要使用 MiniCssExtractPlugin.loader 代替 style-loader
  9. { loader: process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loader : "style-loader" },
  10. // 解决编译后 css 图片不能正常显示的问题
  11. process.env.NODE_ENV === "production" ? { options: { publicPath: "../" } } : {}
  12. ),
  13. "css-loader",
  14. "sass-loader",
  15. "postcss-loader"
  16. ]
  17. }
  18. ]

在生产环境,我们需要对 css 文件进行压缩,所以还需要在 webpack.prod.conf.js 中这样去优化一下:

</>复制代码

  1. // webpack.prod.conf.js
  2. cconst merge = require("webpack-merge")
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  4. const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
  5. const baseConfig = require("./webpack.base.conf.js")
  6. const prodConfig = {
  7. optimization: {
  8. minimizer: [
  9. new OptimizeCSSAssetsPlugin({})
  10. ],
  11. },
  12. plugins: [
  13. new MiniCssExtractPlugin({
  14. filename: "css/[name].[contenthash:8].css",
  15. chunkFileName: "[id].[contenthash:8].css"
  16. }),
  17. ]
  18. }
  19. module.exports = merge(baseConfig, prodConfig)
images

images 方面,我们一般有以下需求:

css 和 js 中的图片可以被解析;

html 中 img 标签的图片可以被解析。

针对以上需求,我们来配置一下子 rules,并且做一下延伸:

</>复制代码

  1. // webpack.rules.conf.js
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
  3. module.exports = [
  4. {
  5. test: /.html$/,
  6. use: [
  7. // 如果 img 标签的 src 为空的话,就报错 xxxHTMLLINKxxx0.
  8. {
  9. loader: "html-loader",
  10. }
  11. ]
  12. },
  13. {
  14. test: /.(png|jpg|gif|ico)$/,
  15. use: [
  16. {
  17. loader: "url-loader",
  18. options: {
  19. name: "[name].[hash:8].[ext]",
  20. limit: 30000,
  21. outputPath: "./images"
  22. }
  23. }
  24. ]
  25. }
  26. ]
其他 devserver 和 热更新

</>复制代码

  1. // webpack.dev.conf.js
  2. const devConfig = {
  3. devServer: {
  4. open: true,
  5. host: "0.0.0.0",
  6. port: 2000,
  7. useLocalIp: true,
  8. hot: true
  9. },
  10. plugins: [
  11. new webpack.HotModuleReplacementPlugin()
  12. ]
  13. }

</>复制代码

  1. 这样智能启动 css 热更新,如果需要 js 热更新,需要添加一段代码,请自行查找 官网文档。
报错

如果 img 标签的 src 为空的话,就报错 xxxHTMLLINKxxx0.

如果报错:TS2688: Cannot find type definition file for "unist". 说明需要安装依赖 @types/unist,其他类似报错一样,这是 typescript@2.0 更换 types 支持方式导致的报错。

编译后 css 图片路径错误,根据是否是生产环境来动态添加 publicPath,点击这里。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104713.html

相关文章

  • webpack 配置页面应用一次尝试

    摘要:最近有一个项目,考虑到要进行,所以要做成多页面应用。为了保证开发速度和开发效率,所以决定使用做一套模块化配置方案。 最近有一个项目,考虑到要进行 SEO,所以要做成多页面应用。为了保证开发速度和开发效率,所以决定使用 webpack 做一套模块化配置方案。 下面主要针对一些重要的点提供思路,并不作详解。完整的代码,我会放在 github(项目地址)上供大家参考,如果有优化的地方,请在...

    lushan 评论0 收藏0
  • 深入理解 Webpack 打包分块(下)

    摘要:例如允许我们在打包时将脚本分块利用浏览器缓存我们能够有的放矢的加载资源。文章的内容大体分为两个方面,一方面在思路制定模块分离的策略,另一方面从技术上对方案进行落地。我之前提到测试之下是什么样具体的场景并不重要。前言 随着前端代码需要处理的业务越来越繁重,我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成,并且用户也不得不花额外的...

    pingan8787 评论0 收藏0
  • Service Worker学习与实践(一)——离线缓存

    摘要:的本质是一个,它独立于主线程,因此它不能直接访问,也不能直接访问对象,但是,可以访问对象,也可以通过消息传递的方式与主线程进行通信。的最佳用法其实就是配合做离线缓存。 什么是Service Worker Service Worker本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请...

    xiaochao 评论0 收藏0
  • HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

    摘要:年前放假的最后一天,我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固,当回忆定格。这是属于我和的独家记忆。 年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我...

    Anonymous1 评论0 收藏0

发表评论

0条评论

Mike617

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<