随笔分类 -  webpack

plugin
摘要：Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。 Plugin示例代码：通过 compiler.plugin(事件名称, 阅读全文
posted @ 2021-12-16 16:53 瑞瑞大人 阅读(730) 评论(0) 推荐(0)
webpack学习（二）
摘要：webpack的作用： 模块打包（可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序） 利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。 编译兼容（通过webpack的Loader机制） 在前端的“上古时期”，手写一堆浏览器兼容代码 阅读全文
posted @ 2021-09-26 16:20 瑞瑞大人 阅读(60) 评论(0) 推荐(0)
require.context()
摘要：用法： 接受三个参数（require.context(directory,useSubdirectories,regExp)） directory：说明需要检索的目录useSubdirectories：是否检索子目录regExp: 匹配文件的正则表达式,一般是文件名 返回参数 require.con 阅读全文
posted @ 2019-10-30 16:37 瑞瑞大人 阅读(8243) 评论(2) 推荐(2)
webpack插件【plugins】配置（六）
摘要：插件的目的在于解决loader无法实现的其他事 由于插件可以携带参数/选项，你必须在webpack配置中，向plugins属性传入new实例。 阅读全文
posted @ 2019-08-21 16:44 瑞瑞大人 阅读(668) 评论(0) 推荐(0)
webpack loader配置（五）
摘要：loader用于对模块的源代码进行转换。loader可以使你在import或加载模块时预处理文件。loader可以将文件从不同的语言转换为JavaScript，或将内联图像转换为data URL。 配置loader 安装相对应的loader 使用loader的三种方式 1.在webpack.conf 阅读全文
posted @ 2019-08-21 15:55 瑞瑞大人 阅读(553) 评论(0) 推荐(0)
webpack模式【mode】配置（四）
摘要：配置用法 1.只在配置中提供mode选项 2.从CLI参数中传递 mode的配置支持以下字符串值： 阅读全文
posted @ 2019-08-21 11:36 瑞瑞大人 阅读(1665) 评论(0) 推荐(0)
webpack输出【output】配置（三）
摘要：配置output选项可以控制webpack如何向硬盘写入编译文件（可以配置多个入口起点，但只指定一个输出配置） 【output】配置写法（一个入口起点） 1.filename用于输出文件的文件名 2.目标输出目录path的绝对路径 此配置将一个单独的bundle.js文件输出到/home/proj/ 阅读全文
posted @ 2019-08-21 11:08 瑞瑞大人 阅读(1305) 评论(0) 推荐(0)
webpack入口起点【entry points】的详细配置（二）
摘要：1.单个入口语法 用法：entry: string|Array<string> 简写： 2.对象语法 用法：entry: {[entryChunkName: string]: string|Array<string>} 能创建多个独立的依赖视图 常见场景： 分离应用程序【app】和第三方库【vend 阅读全文
posted @ 2019-08-19 19:53 瑞瑞大人 阅读(469) 评论(0) 推荐(0)
webpack学习（一）
摘要：webpack是一个静态模块打包器（module bundler），当webpack处理应用程序时，它会递归地构建一个依赖关系图（模块之间有引用依赖。例如：import bar from './bar'） webpack的四个核心概念 核心配置在webpack.config.js文件中 1.入口【e 阅读全文
posted @ 2019-08-19 19:33 瑞瑞大人 阅读(295) 评论(0) 推荐(0)