![](https://img-blog.csdnimg.cn/20210405003030510.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
文章平均质量分 53
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)
whyfail
编程界崇尚以简洁优雅为美,很多时候,如果你觉得一个概念很复杂,那么很可能是你理解错了!
展开
-
Webpack加载器(Loaders)的执行顺序
在Webpack中,加载器的执行顺序是从右往左、从下往上的。为什么会选择这样的执行顺序呢?本文将介绍Webpack加载器执行顺序的原因和解释,并通过一个CSS加载器的示例来说明。原创 2023-06-28 20:15:00 · 1077 阅读 · 0 评论 -
Webpack的基本原理
Webpack是一个现代的前端构建工具,它的主要目标是将多个静态资源(例如JavaScript文件、样式表、图片等)打包成一个或多个包(bundle),以供浏览器加载。下面我们将逐步介绍Webpack的基本原理。原创 2023-06-27 21:00:00 · 910 阅读 · 0 评论 -
webpack(四)开发环境性能优化
一、HMR(模块热替换)HMR: hot module replacement 热模块替换 / 模块热替换作用:一个模块发生变化,只会重新打包构建这一个模块(而不是打包所有模块) ,极大提升构建速度代码:只需要在 devServer 中设置 hot 为 true,就会自动开启HMR功能(只能在开发模式下使用)devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, op.原创 2021-04-14 22:19:55 · 139 阅读 · 0 评论 -
webpack(三)生产环境的基本配置
一、生产环境所需要做的方面提取 css 成单独文件css 兼容性处理压缩 cssjs 语法检查js 兼容性处理js 压缩html 压缩二、基本的生产环境下的webpack.config.js配置const { resolve } = require('path')const MiniCssExtractorPlugin = require('mini-css-extract-plugin')const OptimiziCssAssetsWebpackPlugin = requ.原创 2021-04-06 22:35:15 · 132 阅读 · 0 评论 -
webpack(二)开发环境的基本配置
一、开发环境的基本配置webpack.config.js 是 webpack 的配置文件。作用: 指示 webpack 干哪些活(当你运行 webpack 指令时,会加载里面的配置)所有构建工具都是基于 nodejs 平台运行的,模块化默认采用 commonjs。开发环境配置主要是为了能让代码运行。主要考虑以下几个方面:打包样式资源打包 html 资源打包图片资源打包其他资源devServer二、简单的开发环境webpack.confg.js配置文件// resolve用.原创 2021-04-05 15:33:44 · 65 阅读 · 0 评论 -
webpack(一)讲讲5个小小核心概念
webpack在webpack中,只能读取js文件和json文件webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)Entryentry是入口的意思指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。Outputoutput是输出的意思指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。loader让 webpack 能够去处理那些非 JS 的文件,比如样式文件、图片文件(webp.原创 2021-04-05 00:27:38 · 87 阅读 · 1 评论