缘自世界

缘自世界 查看完整档案

北京编辑郑州轻工业学院  |  网络工程 编辑北京某厂  |  web前端 编辑 github.com/lvzhenbang 编辑
编辑

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就能打败90%的对手,如果你再展现出你50%的智慧,我想没有什么问题可以难倒你。

个人动态

缘自世界 回答了问题 · 2020-01-09

解决为什么cookies数量不一致?

有一个cookie的存活时间为零。在发生URI的重定向等情况下,也会出现cookie数目不一致的情况

关注 3 回答 2

缘自世界 回答了问题 · 2019-06-27

Proxy类型

var let = Proxy(target, handler), 其中target 是什么类型,代理返回的就是什么类型

关注 3 回答 2

缘自世界 分享了头条 · 2019-06-21

除了基本类型(字符串,数字,布尔类型,undefined, null,symbol),引用类型(数组、日期、对象、函数)外;还可以判断文件,文件流,FormData,URLSearchParams,ArrayBuffer等

赞 0 收藏 6 评论 0

缘自世界 回答了问题 · 2019-05-16

解决一个JavaScript数组去重的例子,看不大懂

也没什么。
这里主要用了Set这个东西,集合的特点就是没有重复的元素;
然后使用Array.from来处理类数组;
而[].concat.apply([], arguments)就是使用了apply方法处理function combine() {}中传入的参数,
而concat,就是用来将两个数组拼接成一个数组,处理传入的参数可能是一个数组的情况。

关注 7 回答 6

缘自世界 评论了文章 · 2019-05-16

webpack 构建多页面应用——初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。

使用webpack这个构建工具,可以使我们少考虑很多的问题。

我们常见的单页面应用只有一个页面,它考虑问题,解决问题围绕着中心化去解决,因此很多麻烦都迎刃而解。如果你使用过vue.js,那么想必你一定用过vue-router,vuex,它们就是典型的中心化管理模式,当然还有很多,这里不一一列举了。

而多页面应用,我们不能再按照中心化模式的路走了,因为行不通,这也是很多人认为多页面应用不好做,或者干脆认为webapck只能做单页面应用,而不能做多页面应用的原因。

所以,我要说明的第一点儿是:不要用做单页面应用的思维来做多页面应用。

单页面中的模块共享和多页面的模块共享的区别

  1. 单页面的模块共享,其实是代码块在同一个页面的不同位置的重复出现;而多页面应用的代码块儿共享需要实现的不仅是同一个页面的共享,还要做到跨页面的共享。

    所以,第一个要解决的问题是:不同页面的代码块共享如何实现?

  2. 单页面的路由管理,其实是根据用户的触发条件来实现不同的代码块的显隐;而多页面应用的路由管理则不然,它实现的是页面的跳转。

    所以,第二个要解决的问题是:所页面应用的导航该如何做?

  3. 单页面的状态管理,很受开发者喜好。单页面是一个页面,所以页面中的数据状态的管理操作起来还算得心应手,那么多页面应用的呢,显然依靠它自身很难实现。

所以,第三个要解决的问题是:多页面应用的状态管理如何做?

注:这个问题问的其实有点儿傻,如果你做的是dom操作的多页面儿应用,就不用做状态管理了。如果你还是使用想vue.js这样的库,你就需要考虑要不要再用做多页面的状态管理了,因为此法儿就是为单页面应用做的,多页面儿行不通。

多页面应用的探索

入口(entry):

webpack对入口不仅可以定义单个文件,也可以定义多个文件。

熟悉当页面应用开发的对于下面的代码应该不会陌生吧?

module.exports = {
  entry: './src/index.js',
  ···
}

我第一次接触真正的单页面应用项目使用的就是angualrjs,使用的构建工具使webapck+gulp,其中的webpack.config.js 中的看到的入口文件代码就是它。

后来,接触到的是数组形式,代码如下:

module.exports = {
  entry: ['./src/index.js', 'bootstrap']
  ···
}

这样,将bootstrap和入口文件一起引用,就可以在任何一个代码块中使用boostrap。

再后来,接触到的是对象形式,代码如下:

module.exports = {
  main: './src/index.js'
  ···
}

这样做的目的是为了给输出的文件指定特定的名字。

再后来,就是做多页面应用,就需要用到如下的代码:

module.exports = {
  entry: {
    index: './src/index.js',
    aboutUs: './src/aboutus.js',
    contactUs: './src/contactus.js'
  }
}

为了引入第三方库,我们可以像如下这样做:

module.exports = {
  entry: {
    index: ['./src/index.js', 'loadsh'],
    aboutUs: './src/aboutus.js',
    contactUs: ['./src/contactus.js', 'lodash']
  }
}

webpack3.x的探索

但为了共享模块代码,我们需要像下面这这样做:

const CommonsChunkPlugin = require('webpack').optimization.CommonsChunkPlugin
module.exports = {
  entry: {
    index: ['./src/index.js', './src/utils/load.js', 'loadsh'],
    aboutUs: ['./src/aboutus.js', 'loadsh'],
    contactUs: ['./src/contactus.js','./src/utils/load.js', 'lodash']
  },
  plugins: [
        new CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            chunks: ["index", "aboutUs", "contactUs"]
        })
  ]
}

这样型就会形成如下所示的项目目录结构:

├── src
│ ├── common // 公用的模块
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ ├── uttils // 工具
│ │ ├── load.js // 工具代码load.js
│ ├── index.js // 主模块index.js (包含a.js, b.js, c.js, d.js)
│ ├── aboutUs.js // 主模块aboutus.js (包含a.js, b.js)
│ ├── contactUs.js // 主模块contactus.js (包含a.js, c.js)
├── webpack.config.js // css js 和图片资源
├── package.json
├── yarn.lock

但是这个内置插件的局限性比较大。正如上面所使用的那样,它只会提取chunks选项所匹配的模块共有的代码块。就如同上面代码表示的那样,它只会提取pindex, aboutUs, contactUs共有的代码块loadsh,而不会提取index, contactUs共有的代码块load.js

当然,一般的第三方库,我们也不这样使用,而是像下面这样使用:

const CommonsChunkPlugin = require('webpack').optimization.CommonsChunkPlugin
module.exports = {
  entry: {
    index: ['./src/index.js', './src/utils/load.js'],
    aboutUs: ['./src/aboutus.js'],
    contactUs: ['./src/contactus.js','./src/utils/load.js'],
    vendors: ['lodash']
  },
  externals: {
    commonjs: "lodash",
    root: "_"
  },
  plugins: [
        new CommonsChunkPlugin({
            name: "commons",
            filename: "commons.js",
            chunks: ["index", "aboutUs", "contactUs"]
        })
  ]
}

对于web应用最终的目的是:匹配生成不同的html页面。

这里我们要使用的就是html-webpack-plugin

首先,需要安装html-webpack-plugin

yarn add --dev html-webpack-plugin

然后引入插件,并配置如下:

...
const HtmlWebapckPlugin = require('html-webpack-plugin');
...
  plugins: [
        ...
    new HtmlWebapckPlugin({
      filename: 'index.html',
      chunks: ['vendors', 'commons', 'index']
    }),
    new HtmlWebapckPlugin({
      filename: 'aboutUs.html',
      chunks: ['vendors', 'commons', 'aboutUs']
    }),
    new HtmlWebapckPlugin({
      filename: 'contactUs.html',
      chunks: ['commons', 'contactUs']
    })
  ],
  ...

这样一个基于webpack3.x的多页面框架就有了基本的样子。

webpack4.x的探索

而使用webpack4.x则完全不同,它移除了内置的CommonsChunkPlugin插件,引入了SplitChunksPlugin插件,这个插件满足了我们的需要,弥补了CommonsChunkPlugin的不足。

如果你想要解决之前的不足,去提取index, contacUs共有的模块,操作起来会很简单。正如上面的所列举的那样,我们有三个入口点index, aboutUs, contactUsSplitChunksPlugin 插件会首先获取这三个入口点共有的代码块,然后建立一个文件,紧接着获取每两个入口点的共有代码块,然后将每个入口点独有的代码块单独形成一个文件。如果你使用了第三方库,就像上面我们使用的loadsh,它会将第三方入口代码块单独打包为一个文件。

配置文件webpack.config.js需要增加如下的代码:

···
optimization: {
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: 20,
    maxAsyncRequests: 20,
    minSize: 40
  }
}
···

因为SplitChunksPlugin可以提取任意的入口点之间的共同代码,所以,我们就不需要使用vendors入口节点了。那么,为匹配生成不同的页面代码可以修改成如下:

const HtmlWebapckPlugin = require('html-webpack-plugin')
···
    plugins: [
      new HtmlWebapckPlugin({
        filename: 'index.html',
        chunks: ['index']
      }),
      new HtmlWebapckPlugin({
        filename: 'aboutUs.html',
        chunks: ['aboutUs']
      }),
      new HtmlWebapckPlugin({
        filename: 'contactUs.html',
        chunks: ['contactUs']
      }),
    ]
···

可以发现结果越来越接近我们所想。但是这里还是存在一个问题,第三方库loadsh因为在入口点index, aboutUs中被分别引入,但是构建的结果却输出了两个第三方库文件,这不是我们想要的。这个问题怎么解决呢,因为html-webpack-plugin插件的chunks选项,支持多入口节点,所以,我们可以再单独创建一个第三方库的入口节点vendors。配置代码修改如下:

...
    entry: {
      index: ['./src/index.js', './src/utils/load.js'],
      aboutUs: ['./src/aboutUs.js'],
      contactUs: ['./src/contactUs.js','./src/utils/load.js'],
      vendors: ['loadsh']
    },
    ...
    plugins: [
      new HtmlWebapckPlugin({
        filename: 'index.html',
        chunks: ['index', 'vendors']
      }),
      new HtmlWebapckPlugin({
        filename: 'aboutUs.html',
        chunks: ['aboutUs', 'vendors']
      }),
      new HtmlWebapckPlugin({
        filename: 'contactUs.html',
        chunks: ['contactUs']
      }),
    ],
...

注意:如果不同的入口点儿之间有依赖关系,如上面的indexvendors之间,因为index依赖于vendors,所以vendors要置于index之前。

这篇文章,说到这里基本上已经结束了。当然,webpack多页面应用的知识点还没有讲完,这些内容会放在后续的文章中详解。

源代码

webpack3.x multi-page

webpack4.x multi-page

构建多页面应用系列文章

查看原文

缘自世界 回答了问题 · 2019-01-24

angular多个区块一起开关

你用一个标记控制不了所有的。因为这个标记是响应型的,改变其中一个组件的,就会改变所有的。可以用一个来flag数组来替代,对象亦可

关注 3 回答 2

缘自世界 回答了问题 · 2019-01-23

解决npm run dev报错这个是为什么?

webpack这个包的版本太低,使用webpack4.x

因为webpack-dev-serverv3.1.14,它支持的是webpack4.x。所以addHooks这个方法出错。

关注 5 回答 5

缘自世界 回答了问题 · 2019-01-23

vue 支持 jsx webpack打包一直出错

错误输出,你webpack.config.js当中,没有处理app.vue文件的vue-loader吧?

没有的话,把app.vue改成app.jsx

关注 4 回答 2

缘自世界 回答了问题 · 2019-01-23

有关于nuxt中webpack配置的一个问题?o_0?

你的描述不足,可能实际的问题不是babel的事儿。

把错误的截图补充一下。

关注 3 回答 2

缘自世界 回答了问题 · 2019-01-23

解决关于webpack纯净打包项目

当然有。
webpack4.x之前的CommonsChunkplugin提取公共代码,webapck4.x之后的SplitChunks实现相同的功能。
使用tree shaking可以实现获取指定文件指定功能块的代码。
使用code splitting可以实现将构建输出的大文件转换为几个小文件。
使用entry可以实现webpack对于chunk的控制,通过chunk可以控制输入和输出,
使用html-webpack-pluginoptions.chunk可以为构建生成的*.html文件指定所需要的chunk

总之,你日常开发中,至少90%的功能webpack都可以实现。

如果想深入学习一下webpack可以参考该同学整理的webpack-play其中有大量的总结和示例代码。

关注 2 回答 1

认证与成就

  • 获得 644 次点赞
  • 获得 12 枚徽章 获得 1 枚金徽章, 获得 4 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • 仿QQ(vue)

    一个基于兴趣,为了学习,提高能力的项目

  • webpack-book(翻译)

    它放缓了webpack的学习曲线; 讲解了webpack配置的基本构成及其原理; 讲解了如何处理常见类型静态资源,及其优化方案; 讲解了如何辅助开发规范编码的方法; 讲解了如何实现一个完美的打包自动化方案。

  • 多页面应用构建

    使用webpack构建多页面应用的案例

  • webpack4.x-angularjs

    anuglarjs实战

  • webpack-angular

    anguar实战

注册于 2017-03-15
个人主页被 3.8k 人浏览