Webpack笔记(二)

最新推荐文章于 2024-11-09 00:03:49 发布

Jessie.Zhai

最新推荐文章于 2024-11-09 00:03:49 发布

阅读量124

点赞数

分类专栏： webpack 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/MichelleZhai/article/details/121402907

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack

几个核心概念

几个核心概念

好久没更新文章了，今天要做前端工程化的技术分享，顺便翻了翻webapck的官网，重温下几个概念

webpack 的本质是一个现代JS应用程序的静态模块打包工具,将项目当作一个整体，通过一个给定的主文件，webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件
在这里插入图片描述

入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。
在这里插入图片描述

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
在这里插入图片描述

loader

loader 让 webpack 能够去处理那些非JS文件,毕竟webapck和浏览器只认识解析js
loader有两个属性
1、test属性：识别出哪些文件会被转换
2、use属性：定义出在进行转换时，使用哪个loader
在这里插入图片描述
常见的loader有：

插件(plugin)

plugins可以打包优化，资源管理，注入环境变量。想要使用一个插件
在这里插入图片描述
常用的plugin插件：

从指定入口文件中提取公共文件

 //CommonsChunkPlugin的实现:
   entry:{
     index:'./src/index.js',
     index1:'./src/index1.js',
     index2:'./src/index2.js'
   },
   plugins:[
     new CommonsChunkPlugin({
       name:'common1',
       chunks:['index','index1','index2']
     })
   ]

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
在这里插入图片描述

Code splitting

打包时通常会生成一个大的bundle.js(或者index,看你如何命名)文件，这样所有的模块都会打包到这个bundle.js文件中，最终生成的文件往往比较大。
code splitting就是指将文件分割为块(chunk)，webpack使我们可以定义一些分割点(split point)，根据这些分割点对文件进行分块，并实现按需加载

//a.js
module.exports='Hello zhaishuang';

//main.js
// Now a.js is requested, it will be bundled into another file
const load=require('bundle-loader!./a.js');
// To wait until a.js is available (and get the exports)
//  you need to async wait for it.
load(function(file){
    document.open();
    document.write('<h1>'+file+'</h1>');
    document.close();
})

webpack的构建流程是什么

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

编写loader或plugin的思路

编写 Loader 时要遵循单一原则，每个 Loader 只做一种"转义"工作。每个 Loader 的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用 this.callback() 方法，将内容返回给 webpack 。还可以通过 this.async() 生成一个 callback 函数，再用这个 `callback`` 将处理后的内容输出出去
相对于 Loader 而言，Plugin 的编写就灵活了许多。 webpack 在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果

webpack与grunt、gulp的不同

三者都是前端构建工具

grunt 和 gulp 是基于任务和流的。找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，
整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程

webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用
Plugin 来扩展 webpack 功能

webpack 与前者最大的不同就是支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析

const WebpackDevServer = require("webpack-dev-server");
let webpack = require('webpack');

module.exports = {
    //entry:'./entry.js',  //单个入口文件
    entry: {
		  home: resolve(__dirname, "src/home/index1.js"),
		  about: resolve(__dirname, "src/about/index2.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,//此模式支持热模块替换：热模块替换的好处是只替换更新的部分,而不是页面重载.
        port:'8088',//设置端口号  
         // 代理设置
        proxy: {
            '/api': {
                target: 'http://localhost:80/index.php', // 目标代理
                pathRewrite: {'^/api' : ''}, // 重写路径
                secure: false, // 是否接受运行在 HTTPS 上
            }
        }
    },
    
    //其他解决方案配置
    resolve:{ 
        extensions:['','.js','.json','.css','.scss']  
    },
    
    //插件
    plugins:[
        new webpack.BannerPlugin('This file is create by baibai')
        new CommonsChunkPlugin({//提供公共文件
	       name:'common1',
	       chunks:['index1','index2']
	     })
    ]
    // 提取公共模块，包括第三方库和自定义工具库等
   optimization:{
      // 找到chunk中共享的模块，取出来生成淡出的chunk
      splitChunks:{
        chunks:'all',//async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
        minSize:0,
        cacheGroups:{
          common:{//抽取公共文件
            minChunks:3,
            priority:1,
            name:'common',
            chunks(chunk){
              //exclude `my-excluded-chunk`
              return ['index1','index2'].includes(chunk.name);
            }
          }
        }
      }
   }
}