瓜皮伦的博客

一、express搭建render.jsApp.jsxwebpack.config.jspackage.json目录结构

babel预设babel有多种预设，最常见的预设是@babel/preset-env@babel/preset-env可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件配置{ "presets": [ "@babel/preset-env" ]}兼容的浏览器@babel/preset-env需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件.browserslistrc来描述浏览器的兼容范围last 3 version

其他细节配置文章目录其他细节配置contextoutputlibrarylibraryTargettargetmodule.noParseresolvemodulesextensionsaliasexternalsstatscontextcontext: path.resolve(__dirname, "app")该配置会影响入口和loaders的解析，入口和loaders的相对路径会以context的配置作为基准路径，这样，你的配置会独立于CWD（current working director

开发服务器在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：编写代码控制台运行命令完成打包打开页面查看效果继续编写代码，回到步骤2并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server它既不是plugin也不是loader先来看看它怎么用安装执行webpack-dev-server命令webpack-dev-server命令几乎支持所有的

webpack-plugin编写文件列表生成module.exports = class FileListPlugin { apply(compiler){ //在这里注册事件,类似于window.onload compiler.hooks.emit.tap('FileListPlugin-emit',(compilation) => { let fileList = []; //comp

webpack书写简单处理图片的loader

webpack 编译过程文章目录webpack 编译过程初始化编译输出总过程webpack 的作用是将源代码编译（构建、打包）成最终代码整个过程大致分为三个步骤初始化编译输出初始化此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置编译创建chunkchunk是web

webpack编译结果分析合并两个模块 ./src/a.js ./src/index.js设置一个对象存放模块的路径和代码,key值对应的路径,value是函数,传入三个参数,module exports __webpack_require,其中exports是commjs的导出,modlue.exportslet modules = { //该对象保存了所有的模块，以及模块对应的代码 "./src/a.js": function (module, exports) {