随笔分类 - webpack
摘要：webpack动态插入thymeleaf模板，MVC将要使用数据传递到模板中渲染，得到的html就已经带有要初始显示的数据了github：https://github.com/947133297/webpackDemo2
阅读全文
摘要：https://segmentfault.com/a/1190000010349749 commonJS 案例： 打包后生成代码如下： 对以上代码进行简化： 可以发现，以上就是一个IIFE，两个模块分别以函数的形式，存放到一个modules数组中，然后传递给匿名函数，执行。将这个匿名函数的代码抽取出
阅读全文
摘要：https://facebook.github.io/react-native/docs/debugging.html 热加载 RN的目标是极致的开发体验，修改文件后能在1秒内看到变化，通过以下三个特征来实现： 有了以上功能，剩余的瓶颈就是刷新后会丢失app当前的状态，手动还原了当前要调试的状态需要
阅读全文
摘要：参考： https://webpack.js.org/concepts/hot-module-replacement/ https://webpack.js.org/guides/hot-module-replacement/ hmr技术支持程序运行时的模块（amd、commonJS等）的修改、添加
阅读全文
摘要：一个最简单的代理例子：index.html中有如下代码 里面访问的是相对地址，但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径，但是又报CORS错误。 解决办法是配置一个代理。这里通过webpack-dev-server实现，简单的配置文件如下： 接着运行（以当前目录作为
阅读全文
摘要：参考 ：译文 编写一个loader https://webpack.github.io/docs/loaders.html 按照loader的返回值可以分为两种： 最左loader：这种loader会返回字符串描述的js模块代码，已经是loader的最终处理结果了，这样的字符串会被添加到webpac
阅读全文
摘要：https://doc.webpack-china.org/contribute/writing-a-loader loader是一个导出了函数的node模块，当资源须要被这个loader所转换的时候，这个函数就会被执行，这个函数可以通过this访问loader api。有三种方式来本地开发和测试l
阅读全文
摘要：参考： https://router.vuejs.org/zh-cn/advanced/lazy-loading.html 路由懒加载 // 配置文件 module.exports = { entry: { index: './index.js', }, output: { path: __dirn
阅读全文
摘要：针对 这里 的所提到的观点，如果webpack每次都生成相同名字的bundle.js，会导致问题。这里使用webpack的文件hash功能来解决，简简单单地为输出文件添加一个“[hash]”即可。 运行生成文件如下： 如果把index.js中的 alert(123) ； 改为 alert(1233)
阅读全文
摘要：loader和plugins的区别是：前者处理单个文件，而后者作用于整个打包过程 内置插件：BannerPlugin 可以在打包后的文件上方添加备注信息，如版权说明等 打包后的bundle.js头部多了一行字： HtmlWebpackPlugin 根据一个给定的html，生成另一个html。新的相比
阅读全文
摘要：loader简介 loader在webpack.config.js中进行配置，配置之后，会自动检测打包过程中引入的文件（import或require），通过test成功匹配被引入的文件名后，会对文件内容进行编译处理，处理后再引入对应的编译后的内容。 babel-loader 使用babel-load
阅读全文
摘要：watch 首先介绍watch选项，参考这里。可实现相关源文件改变后自动更新bundle.js文件的功能。在配置文件中添加 watch:true 或执行 webpack -w，即可开启watch功能； 测试发现，与（一个或多个）bundle.js有关的所有js、css等模块发生变化，就会自动执行打包
阅读全文
摘要：先来一个webpack小例子，项目结构如下： 运行结果： 页面上正常显示：“Hi there and greetings!”。 以上的例子很简单，可以直接在bundle.js中打断点进行调试。但是对于复杂的webpack程序，模块很多，如果全都在bundle中打断点进行调试，会很混乱，那该如何方便调
阅读全文
摘要：参考来源：https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 后面的代码：https://github.com/947133297/lwj-webpack-demo 打包AMD和commonJS模块 webpack默认支持
阅读全文
摘要：来源：CSS Modules 用法教程 后面项目地址：https://github.com/947133297/lwj-webpack-demo 关键是打开这一行，表示开启loader的css module功能： style-loader ：用于创建style标签 css-loader：使css文件
阅读全文
浙公网安备 33010602011771号