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文件转化为字符串并进行格式化

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

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

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的构成。

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

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

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

package.json文件配置

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