webpack记录

CommonJS与ES6 Module的区别

 

CommonJS

1.模块依赖关系的建立发生在代码运行阶段

2.导出值的拷贝

cal.js

module.exports={name:'cal'}

index.js

const name=require('./cal.js').name  //require的模块路径可以动态指定，支持传入一个表达式；可以通过if语句判断是否加载某个模块。

CommonJS中允许对导入的值进行更改

 

ES6

1.Module模块依赖关系的建立发生在代码编译阶段

2.值的动态映射，并且这个映射是只读的

cal.js

export const name='cal'

index.js

import{name}from './cal.js'

 

常用loader

1.babel-loader用来处理ES6+并将其编译为ES5.

2.ts-loader用于链接webpack与Typescript的模块

3.html-loader用于将HTML文件转化为字符串并进行格式化

?

1 2 3 4 5 6

rules:[ { test:/\.html$/, use:'html-loader' } ]

4.file-loader用于打包文件类型的资源，并返回其publicPath.　　

?

1 2 3 4 5 6

rules:[ { test:/\.(png|jpg|gif)$/, use:'file-loader', } ]

5.style-loader ,css-loader sass-loader

bundle体积监控和分析

1.vs code中有一个插件import Cost

2. webpack-bundle-analyzer能够帮助我们分析一个bundle的构成。

?

1 2 3 4 5 6

const Analyzer=require('webpack-bundle-analyzer').BundleAanalyzerPlugin; module.exports={   plugins:[     new Analyzer()   ] }

可以帮我们生成一张bundle的模块组成结构图，每个模块所占的体积一目了然。

3.bundlesize可以自动化的对资源体积进行监控

package.json文件配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13

{   “name”:"my-app",   "version":"1.0.0",   "bundlesize":[     {       "path":"./bundle.js".       "maxSize":"50 kB"      }   ],  "scripts":{    "test:size":"bundlesize"   } }