Webpack的一些问题

谈谈webpack

webpack是一个Js的模块打包程序。通过入口文件找到每个文件的依赖,使用loaders进行处理,最后得到Js文件。
glupgrunt的区别在于模块化(AMD,CommonJ)

webpack的核心

  1. 入口
    entry所有文件的起点,构建依赖图的开始
  2. 出口
    output打包完成的Js文件。
  3. 模块
    module中定义相应的loader转换器,将特定的文件进行格式转化。
  4. 插件plugin
    作为Webpack的拓展,插件可以监听到webpack构件过程中的特定事件

问题
区分modulechunkbundle

  • module,是模块化划分的文件,一般在其中对响应模块进行转换处理。
  • chunk对应一个或多个module加载编译之后的文件。
  • bundle所有module加载编译完成后得到的最终文件。chunk组成了bundle

Webpack如何配置

let webpack = require('webpack');

module.exports = {
    entry:'./entry.js',  //入口文件
    
    output:{
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
        path:__dirname, //输出位置
        filename:'build.js' //输入文件
    },
    
    module:{  
        // 关于模块的加载相关,我们就定义在module.loaders中
        // 这里通过正则表达式去匹配不同后缀的文件名,然后给它们定义不同的加载器。
        // 比如说给less文件定义串联的三个加载器(!用来定义级联关系):
        rules:[
          {
            test:/\.css$/,      //支持正则
            loader:'style-loader!css-loader'
          }
        ]
    },
    
    //配置服务
    devServer:{
        hot:true, //启用热模块替换
        inline:true 
        //此模式支持热模块替换:热模块替换的好处是只替换更新的部分,而不是页面重载.
    },
    
    //其他解决方案配置
    resolve:{ 
        extensions:['','.js','.json','.css','.scss']  
    },
    
    //插件
    plugins:[
        new webpack.BannerPlugin('This file is create by baibai')
    ]

}

如何配置多个入口文件

entry:{
	home:resolve(_dirname,"")
	index:resolve(_dirname,"")
}

Webpack的原理

  1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
  2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
  3. 确定入口:根据配置中的 entry 找出所有的入口文件
  4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
  5. 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
  6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
  7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
  • 在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果

Webpack深入

Webpack中多次加载的元素打包后有几次

loaderplugin的思路

  • loader只针对于单一转义,获取原来内容使用callback处理回调结果
  • plugin可监听事件

loaderplugin的区别

  • loaders加载器。
    Webpack模块化,只能解析JavaScript类型文件,使用loader可解析其他类型。在module.rules中配置。
    比如babel-loader将ES6转换成ES5。再比如css-loader加载CSS
  • plugin作为插件,自定义打包的方式,参与整个打包流程。单独配置。

使用webpack优化前端

  • 删除无用代码、注释、压缩体积
  • 路由按需加载
  • 小图片使用base64
  • 使用外部CDN
  • 将打包文件添加哈希,使用浏览器缓存文件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值