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的更多相关文章

  1. 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. 解决方法 ...

  2. 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 ...

  3. webpack 和 code splitting

    Code Splitting指的是代码分割,那么什么是代码分割,webpack和code splitting又有什么样的联系呢? 使用npm run dev:"webpack-dev-ser ...

  4. webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错

    打包的命令格式:webpack 要打包的文件的路径  打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...

  5. webpack的code spliting与chunks

    webpack的code spliting与chunks :https://blog.csdn.net/liuqi332922337/article/details/53020992

  6. Vue脚手架创建项目出现 (Failed to download repo vuejs-templates/webpack: Response code 404)

    搭建好(脚手架2.X版本)环境像往常一样使用vue init webpack xxxx 创建项目可以是没多久就开始报错了 报错结果就是:vue-cli · Failed to download rep ...

  7. 解决 webpack .\src\main.js .\dist\bundle.js 错误

    打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 栗子: webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: 错误原因 w ...

  8. vue+webpack+VS Code入门简单的项目配置

    为了方便,这边的编译器选择的是VS Code (Visual Studio Code); 打开VS Code,选择好自己的工作空间,然后新建一个文件夹作为我们项目的文件夹,然后,show time: ...

  9. webpack 利用Code Splitting 分批打包、按需下载

    webpack中的解决方案——Code Splitting,简单来说就是按需加载(下载),如果是requireJS对应的AMD的方案中这本是在正常不过了.但是在webpack中All in one的思 ...

随机推荐

  1. Pyspark 最近使用的一些有趣姿势的梳理

    之前对 SQL 还是不是非常熟悉的,但是现在或多或少还是会写一些计算任务.比如最近在推送将所有天级的耗时任务都从传统关系型数据库迁移至 Spark 集群当中进行计算,中间遇到一些有趣的小问题在这里记录 ...

  2. vim配图

    https://blog.csdn.net/zhlh_xt/article/details/52458672 https://www.jianshu.com/p/75cde8a80fd7 https: ...

  3. 夺灵者哈卡(Hakkar, the Soulflayer)

    Hakkar, the Soulflayer夺灵者哈卡Deathrattle: Shuffle a Corrupted Blood into each player's deck.亡语:将一张“堕落之 ...

  4. 【转】iPhone手机获取uuid 安装测试app

    iPhone手机获取uuid 安装测试app UDID是一种iOS设备的特殊识别码.除序号之外,每台ios装置都另有一组独一无二的号码,我们就称之为识别码( Unique Device Identif ...

  5. Tosca :配置环境参数

    # 跟Modules TestCases并列 ,右键创建 #再右键创建配置(结构自己安排) #再创建配置参数 #使用配置参数 #引用配置的环境参数

  6. Android日期操作

    第一种方法 SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");// ...

  7. 005 Spring和SpringBoot中的@Component 和@ComponentScan注解

    今天在看@ComponentScan,感觉不是太理解,下面做一个说明. 1.说明 ComponentScan做的事情就是告诉Spring从哪里找到bean 2.细节说明 如果你的其他包都在使用了@Sp ...

  8. CRM 线索 客户 统称为 资源 客户服务管理篇 销售易

    线索 客户 统称为 资源 - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=%E7%BA%BF%E7%B4%A2+% ...

  9. SpringCloud-Eureka配置instanceId显示IP

    eureka: client: serviceUrl: defaultZone: http://localhost:8761/eureka/ instance: preferIpAddress: tr ...

  10. leetcode 361.Bomb Enemy(lintcode 553. Bomb Enemy)

    dp 分别计算从左到右.从右到左.从上到下.从下到上4个方向可能的值,然后计算所有为‘0’的地方的4个方向的值的最大值 https://www.cnblogs.com/grandyang/p/5599 ...