webpack4从0搭建组件库的实现

代码分离

代码分离方法有三种：

  • 入口起点：使用 entry 配置手动地分离代码。
  • 防止重复：使用 SplitChunksPlugin 去重和分离 chunk。
  • 动态导入：通过模块中的内联函数调用来分离代码。

动态导入(dynamic imports)

  • import()
  • require.ensure

预取/预加载模块(prefetch/preload module)

webpack v4.6.0+ 添加了预取和预加载的支持。

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 "resource hint(资源提示)"，来告知浏览器：

  • prefetch(预取)：将来某些导航下可能需要的资源
  • preload(预加载)：当前导航下可能需要资源

配置项重点详解

（1）mode: "pruduction"
启用 minification(代码压缩) 和 tree shaking (usedExports:true)
自动指定DefinePlugin：process.env.NODE_ENV === 'production'

（2）devtool
source map 简介

生产环境：source-map
开发环境：inline-source-map

（3）optimization
splitChunks

splitChunks: {
 chunks: 'all', // 提取公共模块 loadash
 // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法
 // 利用 client 的长效缓存机制，命中缓存来消除请求，并减少向 server 获取资源，同时还能保证 client 代码和 server 代码版本一致。
 cacheGroups: {
  vendor: {
   test: /[\\/]node_modules[\\/]/,
   name: 'vendors',
   chunks: 'all'
  }
 }
},

runtimeChunk

runtimeChunk: 'single' // 提取引导模板 将 runtime 代码拆分为一个单独的 chunk

（5）output

// filename: '[name].[contenthash].js', // content hash 内容变化才会变化
filename: 'webpack-numbers.js',
path: path.resolve(__dirname, 'dist'),

// 暴露 library 这是库名称 import from 'webpackNumbers'
library: 'webpackNumbers',
libraryTarget: 'umd'

（6）plugins

HashedModuleIdsPlugin

const { HashedModuleIdsPlugin } = require('webpack');

plugins: [
  // 不会因模块增加和减少导致的模块内容变化，增加长缓存命中机制
  new HashedModuleIdsPlugin()
],

BundleAnalyzerPlugin

分析打包代码

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

plugins: [
  new BundleAnalyzerPlugin()
]

到此这篇关于webpack4从0搭建组件库的实现的文章就介绍到这了,更多相关webpack4搭建组件库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 手动用webpack搭建第一个ReactApp的示例

    手动用webpack搭建第一个ReactApp的示例

    学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境. npm install -g create-react-app create-react-app my-app cd my-app npm start 使用淘宝 NPM 镜像 使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想. 使用淘宝镜像安装 npm 包只需要两步即可: 安装 cnpm n

  • vue+node+webpack环境搭建教程

    vue+node+webpack环境搭建教程

    一.环境搭建 1.1.去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html ) 注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错.推荐最新版本. 下载安装包之后直接点击安装即可.测试安装成功的界面如下: 1.2.利用npm安装webpack命令行语句为npm install webpack -g.测试安装成功的界面如下: 1.3.下面就是安装淘宝镜像,如下图

  • Vue-cli-webpack搭建斗鱼直播步骤详解

    Vue-cli-webpack搭建斗鱼直播步骤详解

    前言 想必大家都看过斗鱼直播吧?这次在下使用从github上面摸下来的API,为大家重现一下斗鱼网站的搭建,使用vue-cli-webpack来实现. 声明 本文章所用API均从网络获取,本文作者不承担任何法律责任,请阅读本文的小伙伴们用于学习用途,不能用于商业! 如有侵权行为,请与作者联系,作者将于2日内删除. 效果 pc端 移动端 开始 好,扯了这么久的淡,该开始构建项目了 项目初始化 初始化文件夹 打开一个新文件夹,在命令行输入: vue init webpack 如果显示vue not

  • 详解Webpack + ES6 最新环境搭建与配置

    一,准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像 二,创建目录及安装webpack创建项目 在命令行中输入 npm init -y 我们看到了项目中多了一个package.json文件,它定义了这个项目中所需各种模板及项目中的配置信息.该对象的每一个成员就是当前项目的一项设置.详细设置信息请参考 https://docs.npmjs.com/files/package.json 安装webpack 全局安装webpack,在命令行输入 npm install webp

  • webpack搭建vue 项目的步骤

    webpack搭建vue 项目的步骤

    前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤: 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成package.json文件 npm init 大概生成的package.json 如下: { "name": "vue-demo", "version": "1.

  • 详解webpack+angular2开发环境搭建

    刚搭建完一个webpack+angular2环境,由于angular及webpack官网上没有一个折中的搭建方案,所以只能摸索着搭建,中间遇到一些坑,遂总结记录下来,以供交流. 搭建完后的项目初步环境如下: app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.js app.componnet.ts:组件文件.angular2应用是由组

  • windows下vue-cli及webpack搭建安装环境

    windows下vue-cli及webpack搭建安装环境

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm

  • vue2.x+webpack快速搭建前端项目框架详解

    vue2.x+webpack快速搭建前端项目框架详解

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如下

  • webpack4从0搭建组件库的实现

    代码分离 代码分离方法有三种: 入口起点:使用 entry 配置手动地分离代码. 防止重复:使用 SplitChunksPlugin 去重和分离 chunk. 动态导入:通过模块中的内联函数调用来分离代码. 动态导入(dynamic imports) import() require.ensure 预取/预加载模块(prefetch/preload module) webpack v4.6.0+ 添加了预取和预加载的支持. 在声明 import 时,使用下面这些内置指令,可以让 webpack

  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈 如何通过新版脚手架创建项目,这里就不提了

  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    目录 1 packages 目录 1.1 foo 目录 1.2 yyg-demo-ui 目录 2 实现 foo 示例组件 2.1 初始化 package.json 2.2 初始化 foo 目录结构 2.3 定义 foo 组件的 props 2.4 实现 foo 组件 2.5 定义 foo 组件入口文件 3 实现 yyg-demo-ui 3.1 初始化 package.json 3.2 安装依赖 3.3 定义入口文件 前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库.

  • Vue组件库ElementUI实现表格列表分页效果

    Vue组件库ElementUI实现表格列表分页效果

    ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 <el-pagination>加上@size-change="handleSizeChange.@current-change="handleCurrentChange"处理当前页和当前页数的改变事件 <!--

  • Vue组件库ElementUI实现表格加载树形数据教程

    Vue组件库ElementUI实现表格加载树形数据教程

    ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 关键代码,在el-table添加属性, :tree-props="{children: 'children'}" ,注意row必须命名为children,官网也进行了说明: 支持树类型的数据的显示.当 row 中包含 children 字

  • Vue3从0搭建Monorepo项目组件库

    目录 引言 什么是 Monorepo 为什么要用 pnpm pnpm 的使用 安装 初始化项目 包管理 引言 本篇文章是从0搭建Vue3组件库系列文章第二篇,本篇文章将带领大家使用pnpm搭建一个简单的Monorepo项目,并完成包的关联与测试 什么是 Monorepo 其实很简单,就是一个代码库里包含很多的项目,而这些项目虽然是相关联的,但是在逻辑上是独立的,可以由不同人或者团队来维护 为什么要用 pnpm pnpm 对于包的管理是很方便的,尤其是对于一个 Monorepo 的项目.因为对于我

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

  • 如何用DevUI搭建自己的Angular组件库

    如何用DevUI搭建自己的Angular组件库

    前言 作为前端开发者,随着公司业务的不断发展和增长,业务对组件功能.交互的诉求会越来越多,不同产品或者团队之间公用的组件也会越来越多,这时候就需要有一套用于支撑内部使用的组件库,也可以是基于已有组件扩展或者封装一些原生三方库.本文会手把手教你搭建自己的Angular组件库. 创建组件库 我们首先创建一个Angular项目,用来管理组件的展示和发布,用以下命令生成一个新的项目 ng new <my-project> 项目初始化完成后,进入到项目下运行以下cli命令初始化lib目录和配置, 生成一

  • 从零搭建react+ts组件库(封装antd)的详细过程

    从零搭建react+ts组件库(封装antd)的详细过程

    目录 整体需求 开发与打包工具选型 使用webpack作为打包工具 使用babel来处理typescript代码 使用less-loader.css-loader等处理样式代码 项目搭建思路 整体结构 方案思路 项目搭建实施 初始化 Babel引入 了解Babel webpack的基于babel-loader的处理流程 引入React相关库(externals方式) 编写组件代码 编译打包组件库 效果演示 处理样式(less编译与css导出) 依赖引入 配置webpack 编写样式代码 编译组件

随机推荐