![](https://img-blog.csdnimg.cn/8fd39b3183b041c7ba5e045ac8a67e97.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 74
webpack
小管打天下
这个作者很懒,什么都没留下…
展开
-
【Webpack基础】不同的打包模式
每次切换不同打包模式,都需要修改,比较麻烦所以,可以为不同的打包模式 创建一个 配置文件1.2 webpack.prod.js1.3 打包警告此时打包就会报错,因为它不知道你使用哪个配置文件,此时就会使用默认配置build -> 线上打包dev -> 开发打包1.5 问题:dev 打包会清空 dist 目录如果不希望清空,可以通过如下配置:1.6 问题:dev prod 配置文件内容重复借助工具 webpack-merge提取 webpack.prod.js 公共配置提取 web原创 2022-06-10 14:15:09 · 499 阅读 · 0 评论 -
【Webpack基础】理解Tree Shaking
打包的时候没有使用的方法也会被打包,如果这个方法的业务逻辑很多,就会打包很多没有必要的代码,导致打包体积过大,加载缓慢此时就可以用到 Tree Shaking 来去除 没有使用到的代码Tree Shaking 只支持 ES Module,不支持 CommonJS,因为 ES Module 是确定的去除 没有使用到的代码的前提是 引入的模块是确定的对导入的模块做检查,看你是否使用了这个模块,如果使用了就保留,没有就删除问题:对所有引入的模块都会检查此时就需要在 package.json 里面增加这一项:打包原创 2022-06-09 00:51:06 · 354 阅读 · 0 评论 -
【webpack基础】Webpack 常用命令总结
2. 初始化默认的package.json文件3. 下载webpack插件到node_modules 并在package.json文件中加上webpack的配置内容4. 局部安装webpack-cli4. webpack常用指令5. 安装loader并将该loader配置到package.json文件中6. 全局安装webpack-dev-server7. 局部安装webpack-dev-server8. 常用loader的安装:处理文件:、 将文件发送到输出文件夹原创 2022-06-08 17:23:44 · 1573 阅读 · 0 评论 -
【Webpack基础】打包React、Vue代码
index.htmlindex.js打包就会报错原因:webpack 不认识 jsx 语法,此时就需要借助 preset-react安装配置 webpack.config.js.babelrc配置 .babelrcpresets 的执行顺序 是从下往上2. 打包Vue代码2.1 准备工作index.jsApp.vue打包后报错,因为 webpack 不认 vue 文件,此时需要借助 vue-loadervue-loader:js 里 加载 vue 文件vue-templat原创 2022-06-08 16:25:17 · 561 阅读 · 1 评论 -
【Webpack基础】Babel的进一步理解
声明 core-js 版本把这一段代码删掉1.2 core-js是一个标准库,里面主要是用 ES5 去实现一些新增的语法有了它就可以写 ES6,ES7 甚至更高版本的代码它唯一的缺失就是没有 生成器 的实现方法包含了 生成器 方法的实现当 core-js 和 regenerator 结合起来以后,所有的新特性都可以被支持了就相当于是打补丁,用 ES5 的方式 去实现没有被语法降级的缺失,比如 Promise、map 等等就是将 core-js 和 regenerator 整合在了一起在 JS原创 2022-06-07 22:32:50 · 247 阅读 · 0 评论 -
【Webpack基础】使用Babel处理ES6代码
一些 低版本的 IE 浏览器 无法识别 ES6 语法,此时就需要通过 Babel 进行 语法降级babel-loader:处理 JS 文件,把 babel 和 webpack 建立通信桥梁babel-core:babel 核心库,分析 JS 语法babel/preset-env:用于语法降级babel/polyfill:用于实现语法降级的一些缺失,比如:promise、map安装配置打包 安装 babel/polyfill1.2 按需引入 polyfill没有使用 polyfi原创 2022-06-07 20:07:14 · 389 阅读 · 0 评论 -
【Webpack基础】JS里的热更新
此时就需要通过热更新解决这个问题counter.jsnumber.jswebpack.config.jsindex.js修改样式不用写这一段代码也可以实现热更新,是因为 style-loader 里面本身有这段代码,只要想实现热更新就少不了这段代码vue -> vue-loader,react -> babel-preset...............原创 2022-06-07 16:04:22 · 813 阅读 · 0 评论 -
【Webpack基础】认识HMR热更新
run build 会生成打包文件run dev 不会,它放到内存里了,以此来提升打包速度每次修改都会重新刷新,input输入的内容,临时定义的变量都会丢失配置打包 打包提示这个说明已经开启热更新了原创 2022-06-06 18:07:36 · 198 阅读 · 0 评论 -
【Webpack基础】使用WebpackDevServer
问题:修改了源代码 -> 重新执行 npm run build 进行打包 -> 刷新页面 -> 看到最新的源代码执行的结果解决:通过 WebpackDevServer 优化流程,提升开发效率修改了源代码 -> 直接就看到最新的代码执行结果安装配置 webpack.config.js,指定服务器根目录配置 package.json,添加执行命令执行命令...........................原创 2022-06-05 16:56:31 · 417 阅读 · 0 评论 -
【Webpack基础】认识sourceMap
可以调试代码当代码有问题的时候,就会告诉我们源代码哪一行出错了需求:dist/main.js 96行 报错了 -> src/index.js 1行原创 2022-06-05 11:21:08 · 1132 阅读 · 0 评论 -
【Webpack基础】plugins的概念
是一个数组,可以配置插件每次打包都需要手动创建html,比较麻烦html-webpack-plugin 可以帮你自动生成 html 文件安装配置打包后自动帮你生成 html 文件,并帮你引入打包生成的 js 文件引入模板打包后..............................原创 2022-06-05 09:25:23 · 478 阅读 · 0 评论 -
【Webpack基础】处理样式(二)
在一些老版本的webpack里面,Loader写成字符串,只会在第一次引入的时候sass编译,下一次引入就不会编译了此时就需要配置项的写法:原创 2022-06-02 15:21:15 · 254 阅读 · 0 评论 -
【Webpack基础】处理样式(一)
index.htmlindex.cssindex.js报错不支持 .css 文件,需要安装对应的 Loader 处理安装注意一定要指定安装版本,否则会报错配置1.2.2 执行顺序从后往前,从下往上1.2.3 css-loader 的作用当发现css文件之间存在引用关系的时候就会分析出各个文件依赖的关系,根据这些依赖整合在一起最后放到页面的style标签里面例子:logo.css.index.css当项目中遇到 sass、less、stylus 等预处理器如何用 webpack原创 2022-06-01 23:55:15 · 221 阅读 · 0 评论 -
【webpack基础】Loader的概念、处理图片类型模块
目录1 Loader的概念1.1 Loader的概念1.2 Loader的配置1.3 file-loader1.3.1 渲染图片到页面1.3.2 保留原本的图片名1.3.3 产出到指定文件夹1.4 url-loader1.4.1 基本使用2 处理图片1 Loader的概念1.1 Loader的概念在webpack里面默认只能支持js模块,若要支持其它模块需要做额外配置,这里的配置就是使用相应的Loader来进行配置1.2 Loader的配置导入jpg模块import jspp from '.原创 2022-04-23 17:18:46 · 1601 阅读 · 0 评论 -
【Webpack基础】Webpack的定义、配置文件
目录1 Webpack的定义1.1 定义1.2 模块1.3 支持的模块类型2 配置文件2.1 基础2.2 基本配置2.2.1 入口文件2.2.2 目录名字2.2.3 配置文件起别名2.3 build命令执行webpack3 目录整理1 Webpack的定义1.1 定义Webpack 只知道模块相关的事情(模块导入和导出)webpack 是一个模块打包的工具常见的模块化规范有ES Module、CommonJS、AMD、CMD,而 Webpack 可以对这些模块化规范进行打包官网解释:1.原创 2022-04-23 14:25:21 · 1153 阅读 · 0 评论 -
【Webpack基础】认识Webpack
目录1. Webpack4出现的意义1.1 传统网页开发1.2 Webpack出现1. Webpack4出现的意义1.1 传统网页开发传统的网页开发如果项目比较复杂,就会存在很多模块,而每引用一次模块就会发送一次http请求,最终就会导致网页加载缓慢这时候就需要一个工具来管理这些模块1.2 Webpack出现它是一个模块打包工具,它会把一些模块接收进来,然后经过一些处理,最后打包成几个静态资源文件,这样在我们的项目里面引入这些静态资源文件就可以了,引入的数量就比没有打包之前要少很多很多Vue、原创 2022-04-22 11:21:27 · 373 阅读 · 0 评论