深入浅出webpack

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 1.缓存： 1.作用： 每次构建的时候只构建我们修改过的文件， 对于没有修改过的文件就不要重新参与编译了。

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情 1.sourceMap： sourceMap：是一种提供源代码到构建代码的映射技术 作用：如果构建后代码出

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 1.什么是模块热更新 作用：它允许在运行时替换，添加，删除各种模块， 当你对代码修改并保存后，webpac

1.作用： 规范语法，让代码风格一致 2.使用库： js 语法检查：eslint-loader eslint 下载依赖：cnpm i eslint-loader eslint --save-dev 注

1.单独提取css样式 插件：miniCssExtractPlugin 作用：miniCssExtractPlugin是用link标签引入css，代替style-loader style-loader

1.根据图片目录新建文件 2.index.js中引入css import "./index.less" 3.写less样式 4.webpack.config.js配置文件 1.url-loader 作

使用插件html-webpack-plugin，默认会创建一个空的html，自动引入打包输出的所有资源（js/css）

1.js简单兼容性处理： 缺点：只能转换基本愈发，如promise就不能转换。使用babel-loader @babel/core @babel/preset-env插件

当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面， 而无需进行完全刷新重新加载整个页面。 这个例子只是把示例页面的功能简单介绍下，并且让你体会下每次修改代码都要重新刷新…

sourceMap：是一种提供源代码到构建代码的映射技术。如果构建后代码出错了，通过映射可以追踪源代码错误

oneof 只能匹配一个文件，不能两个配置处理同一文件。相当与break语句，oneof里面的loader一旦匹配成功就会跳出匹配

缓存的作用对babel缓存，文件资源缓存每次构建的时候只构建我们修改过的文件，对于没有修改过的文件就不要重新参与编译了。

1.新建文件src：index.js，index.css； 2.新建webpack配置文件webpack.config.js 1.作用： 2.webpack配置: //resolve用来拼接绝对路径的

1.初次用webpack打包js模块 （1）安装webpack （2）创建index.js文件 （3） 运行命令打包 开发环境指令： 生产环境指令： 2.小结： 1.webpack能处理js/json

webpack处理应用程序时，把一个项目当作整体，通过一个给定的主文件开始找到所有的依赖文件，构建一个依赖关系图（这个依赖关系图包含应用程序需要的每个模块），然后使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。 入口：指示webpack应该使用哪个模块，…