分类: javascript webpack

webpack笔记03


作者:朱培鑫

时间:2018-05-03

打包JS

webpack --entry <entry> --output <output>
webpack --config webpack.conf.js 默认 webpack.config.js
【注意】webpack参数中地址需要写相对路径或者绝对路径,不能只写一个文件名。
【例子】
https://github.com/zhupeixin/studywebpack/tree/master/3-2

编译ES6

npm install babel-loader@8.0.0-beta.0 @babel/core
npm install --save-dev babel-loader babel-core

babel presets
es2015
es2016
es2017
env (包含上述三个以及最新标准)
babel-perset-react
babel-perset-stage0-3

npm install @babel/preset-env --save-dev 之前只用最新版本安装babel
npm install babel-perset-enc --save-dev

其中有一个参数targets可以指定编译什么
targets.browsers (或者node)
targets.browsers : "last 2 versions"
targets.browsers : "> 1 %"
获取源 browserslist -> 数据源 can I use

Babel Polyfill
Babel Runtime Transform

函数和方法
Generator
Set
Map
Array.from
Array.prototype.includes

Babel Polyfill
全局垫片
为应用准备
npm install babel-polyfill --save
import "babel-polyfill"

Babel Runtime Transform
局部垫片
为开发框架准备
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
.babelrc

编译TypeScript

typescript-loader

安装
npm install ts-loader --save-dev
npm install typescript awesome-typescript-loader --save-dev

配置
tsconfig.json

tsconfig
配置选项
官网/docs/handbook/compiler-options.html

常用选项
compilerOptions
include
exclude

声明文件(参数错误提示)
npm install @types/lodash
npm install @types/vue

Typings
npm install typings
typings install lodash

提取公用代码

减少代码冗余
提高加载速度

CommoChunkPlugin
webpack.optimize.CommonChunkPlugin 插件

配置
options.name or options.names 表示Chunk的名称,或者一系列Chunk名称
options.filename 打包以后的文件名
options.minChunks 代码重复引用的次数
options.chunks 指定提取代码的范围
options.children 子模块查找依赖
options.deepChildren 所有模块查找依赖
options.async 创建异步代码块

场景
单页应用
单页应用 + 第三方依赖
多页应用 + 带三方依赖 + webpack生成的代码

代码分割和懒加载

webpack methods
ES2015 loader spec

webpack methods
require.ensure
[]:dependencies
callback
errorCallback
chunkName

require.include

ES2015 Loader Spec

System.import ->import()

import() ->Promise

import().then()

import(

/*webpackChunkName:async-chunk-name*/
/*webpackMode:lazy*/
modulename

)

应用场景
分离业务代码和第三方依赖
分离业务代码和业务公共代码和第三方依赖
分离首次加载和访问后加载的代码

( 本篇完 )