webpack package code into different bundle
Demo4操作手册
本Demo演示如何进行分块打包等较高级的使用
准备环境
初始化环境, cd到demo1目录之后, 执行如下命令:
npm init -y
npm install webpack webpack-cli webpack-dev-server typescript ts-loader -D
新建tsconfig.json, 内容如下:
{
"compilerOptions": {
"target": "es5"
}
}
添加npm命令到package: ‘webpack-dev-server --open’.
L7 require.ensure
当一个应用的代码很多的时候, 我们把所有的代码都打包到一个文件, 似乎显得有点臃肿, 同时考虑到首页加载性能等其他原因, 按照一定规则把代码分开打包是很有必要的.
Webpack会使用require.ensure来定义各个分离的节点.
单个文件分离
在src目录下创建library1.ts和index.ts, 内容如下:
// library1.ts
export class Library {
hi() {
console.log('I\'m Library1.')
}
}
// index.ts
require.ensure(['./library1.ts'], function (require) {
var lib = require('./library1');
const ins = new lib.Library();
ins.hi();
});
新建webpack.config.js, 内容如下:
module.exports = {
entry: './src/index.ts',
output: {
filename: 'output.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
}
}
执行webpack即可打包成功, 可以看到dist目录下有output和1.output两个文件.
多个文件分离
在之前文件的基础上新建library2.ts和library3.ts, 内容如下:
// library2.ts
export class Library {
hi() {
console.log('I\'m Library2.')
}
}
// library3.ts
export class Library {
hi() {
console.log('I\'m Library3.')
}
}
修改index.ts内容如下:
require.ensure(['./library1.ts'], function (require) {
var lib = require('./library1');
const ins = new lib.Library();
ins.hi();
});
require.ensure(['./library2.ts', './library3.ts'], function (require) {
var lib2 = require('./library2');
const ins2 = new lib2.Library();
ins2.hi();
var lib3 = require('./library3');
const ins3 = new lib3.Library();
ins3.hi();
});
执行webpack即可打包成功, 可以看到dist目录下有output、1.output和2.output三个文件.
放到浏览器去执行可以看到library2和library3打包进了1.output, 而library1打包进了2.output.
L8 bundle-loader
bundle-loader其实只是对require.ensure做了一个封装, 原理还是一样的, 安装:
npm install bundle-loader -S
修改webpack.config.js如下:
module.exports = {
entry: './src/bundle.ts',
output: {
filename: 'output.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'bundle-loader'
}, {
loader: 'ts-loader'
}
]
}
]
}
}
在src目录新建bundle.ts, 内容如下:
require('./library1')(lib => {
const ins = new lib.Library();
ins.hi();
});
require('./library2')(lib => {
const ins = new lib.Library();
ins.hi();
});
require('./library3')(lib => {
const ins = new lib.Library();
ins.hi();
});
打包结果是library的1、2、3分别打包进了output的2、3、4.
L9 SplitChunksPlugin
当我们多个打包文件依赖同一个包时, 如果不是把所有包都分开打包, 那么很多被依赖的包可能被重复打包进其他的包, 这是时候就需要对公共代码进行单独打包了.
实际上之前各种资料介绍的都是CommonsChunkPlugin, 而她从V4开始已经被移除了, 所以下面介绍SplitChunksPlugin的使用.
实际上这一步我没有完成, 后面有时间再继续更新吧......
webpack package code into different bundle的更多相关文章
- E: The package code needs to be reinstalled, but I can't find an archive for it.
ubuntu安装软件时报错: E: The package code needs to be reinstalled, but I can't find an archive for it. 解决方法 ...
- 20、uwp打包失败(All app package manifests in a bundle must declare the same values under the XPath *[local-name()='Package']/*[local-name()='Dependencies'])
在给 uwp工程打商店包的时候,遇到了一个异常: Error info: error 80080204: All app package manifests in a bundle must decl ...
- webpack 和 code splitting
Code Splitting指的是代码分割,那么什么是代码分割,webpack和code splitting又有什么样的联系呢? 使用npm run dev:"webpack-dev-ser ...
- webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...
- webpack的code spliting与chunks
webpack的code spliting与chunks :https://blog.csdn.net/liuqi332922337/article/details/53020992
- Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)
搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...
- 解决 webpack .\src\main.js .\dist\bundle.js 错误
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 栗子: webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: 错误原因 w ...
- vue+webpack+VS Code入门简单的项目配置
为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...
- webpack 利用Code Splitting 分批打包、按需下载
webpack中的解决方案——Code Splitting,简单来说就是按需加载(下载),如果是requireJS对应的AMD的方案中这本是在正常不过了.但是在webpack中All in one的思 ...
随机推荐
- mpvue搭建小程序框架
http://mpvue.com/mpvue/ 美团开源了mpvue 由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler) 运行时框架 runtime 和代码编译器 c ...
- flutter 监听返回
在项目中遇到了一个场景,A页面必须返回某个tab页,但是A页面可能会调到B,再跳到C,最后回到A.这个时候A的返回肯定是C. 想了一些解决方案,都不如监听A页面的实体键返回或者虚拟键返回来的快速便捷. ...
- realloc()函数
原型:extern void *realloc(void *mem_address, unsigned int newsize); 参数: mem_address: 要改变内存大小的指针名 newsi ...
- vue-cli3配置多页面入口
假如要单独将登陆页面当成一个项目入口文件: 第一步:创建一个登陆页面的文件 在项目public文件夹下创建一个login.html,其实就是将index.html复制一份,将title改一下: 第二步 ...
- Java 死锁以及死锁的产生
public class DeadLockSample { public static void main(String[] args) { DeadLock d1 = new DeadLock(tr ...
- centos 普通用户 和 root 相互切换方法
root 用户切换为普通用户 :用 login -f username (加 -f 不用输入密码)例如普通用户的用户名为hadoop,这里就是 login -f hadoop 普通用户切换为root用 ...
- sanity checking
https://zh.wikipedia.org/wiki/健全性测试 Modules\_threadmodule.c /* Lock objects */ typedef struct { PyOb ...
- Unix下可用的五种 I/O 模型
介绍 当TCP客户端同时处理两个输入时:标准输入和TCP套接字,当客户端fgets(在标准输入上)被阻塞并且服务器进程被终止时,我们遇到了问题.服务器TCP正确地将FIN发送到客户端TCP,但由于客户 ...
- 004 JpaRepository,CrudRepository,PagingAndSortingRepository的区别
很多程序都在使用,CrudRepository或者PagingAndSortingRepository,但是以前自己的程序使用的是JpaRepository,然后查了一下材料,记录一下. 1.类图 2 ...
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_37、分布式缓存Redis介绍
笔记 1.分布式缓存Redis介绍 简介:讲解为什么要用缓存和介绍什么是Redis,新手练习工具 1.redis官网 https://redis.io/download ...