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. python中string、json、bytes的转换

    json->string str = json.dumps(jsonobj) bytes->string str = str(bytes,‘utf-8’) string->json ...

  2. FCS省选模拟赛 Day3

    Description  Solution T1 game 咕咕咕 T2 string fail树各个节点的深度之和怎么求? 我们考虑每个前缀的深度是什么 发现这个值就相当于有多少个前缀等于它的后缀 ...

  3. 使用composer下载依赖包下载失败的解决方法

    下载好的composer默认的下载地址是国外的,在下载的过程中网络不好或者可能被墙,将下载的地址换成国内的地址即可 有两种方式启用本镜像服务: 系统全局配置: 即将配置信息添加到 Composer 的 ...

  4. 7、vueJs基础知识07

    UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...

  5. Oracle语法 及 SQL题目(三)

    目录 SQL题目六 第一个问题思路(查询酒类商品的总点击量) 第二个问题思路(查询每个类别所属商品的总点击量,并按降序排列) 第三个问题思路(查询所有类别中最热门的品种(点击量最高),并按点击量降顺序 ...

  6. 三大框架 之 SSH整合

    目录 SSH整合 Spring整合web项目 在Servlet当中直接加载配置文件,获取对象 存在问题 解决方案 SSH整合 引入Jar包 引入配置文件 创建包结构 创建相关类 创建Customer业 ...

  7. 【转】python requests库添加自定义cookie的方法

    requests库是个很方便的爬虫,相关文档已经很详细了.不过我今天在爬网页时,有一个网站是在脚本中添加cookie的,但我向requests.cookies里添加cookie费了不少周折.尝试了多个 ...

  8. C# WinForm MessageBox弹窗倒计时的自动关闭

    [DllImport("user32.dll", EntryPoint = "FindWindow")]        private static exter ...

  9. 识别哈希算法类型hash-identifier

    识别哈希算法类型hash-identifier hash-identifier是一款哈希算法识别工具.通过该工具,用户可以识别哈希值所使用的哈希算法.确定算法后,就可以采用对应的工具进行xx.执行该命 ...

  10. kotlin中val和var的区别

    var: var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和Java中声明变量的方式一样.val: val是一个只读变量,这种声明变量的方式相当于java中的f ...