EmotionComputer

antd打包生成的lib / es / dist

webpack打包分析优化

webpack dev-server

vite

webpack4.0 以后需要安装webpack-cli，CLI => 命令行接口(command line interface)，其实webpack-cli也不是必须的，但是在webpack启动的时候需要它，它的作用就是在例如执行webpack --config webpack.config.js时将参数传给webpack。参考:https://www.webpackjs.com/api/cli/执行webpack，首先去看webpack命令后面有没有指定配置文件，若没有，再去寻找当..

npm start和 npm run start是等效关系。在一个npm管理项目中，一般默认有start的定义，且会经常使用，所以就在npm执行中通过npm start简化了npm run start的写法，类似的还有npm stop、npm test等等。而其他的一些不太通用的命令项则只能通过npm run <命令项>的形式执行。npm start 传递参数与直接node xx.js 传递参数的区别：在执行node xx.js 命令时，如果想传递参数，node xx.js --a --

1. filenamefilename 是一个很常见的配置，就是对应于 entry 里面的输入文件，经过webpack 打包后输出文件的文件名。比如说经过下面的配置，生成出来的文件名为 index.min.js。{ entry: { index: "../src/index.js" }, output: { filename: "[name].min.js", // index.min.js }}2. chunkFilenamec

webpack 官网对 chunk 和 bundle 做出了解释，说实话太抽象了，我这里举个例子，给大家形象化的解释一下。首先我们在 src 目录下写我们的业务代码，引入 index.js、utils.js、common.js 和 index.css 这 4 个文件，目录结构如下：src/├── index.css├── index.html # 这个是 HTML 模板代码├── index.js├── common.js└── utils.jsindex.css 写一点儿简单的样式：b

问题来源对于浏览器来说，一方面期望每次请求页面资源时，获得的都是最新的资源；一方面期望在资源没有发生变化时，能够复用缓存对象。这个时候，使用文件名+文件哈希值的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段。区分hash，contenthash，chunkhashwebpack内置的hash有三种：hash：每次构建会生成一个hash。和整个项目有关，只要有项目文件更改，就会改变hashcont

参考链接：https://npm.io/package/resolve-url-loader解决警告！！！ webpack or the upstream loader did not supply a source-map'resolve-url-loader', // 解决由scss文件@import进来的其他scss文件中url()相对路径不正确问题 { loader: 'sass-loader', options: { sourceMap: true

官网参考:https://webpack.docschina.org/guides/caching/webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。利用缓存进行性能优化，将第三方包单独打包将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法，这是因为，它们很少像本地的源代码那样频繁修改。因此通过实现以上步骤，利用 client 的长效缓存机制，命中缓存

1.什么是sourcemap?webpack打包后的文件会自动添加很多代码, 在开发过程中非常不利于我们去调试因为如果运行webpack打包后的代码,错误提示的内容也是打包后文件的内容所以为了降低调试的难度, 提高错误代码的阅读性, 我们就需要知道打包后代码和打包之前代码的映射关系只要有了这个映射关系我们就能很好的显示错误提示的内容, 存储这个映射关系的文件我们就称之为sourcemap2.如何开启sourcemaphttps://www.webpackjs.com/configuration/

DefinePlugin是webpack注入全局变量的插件，通常使用该插件来判别代码运行的环境变量。示例1：假设在配置文件中定义编译时全局常量 process.env.firstNamenew webpack.DefinePlugin({ 'process.env.firstName': JSON.stringify("ShuiTao")});源文件index.js内容如下console.log(process.env.firstName)最终转译后的js文件console.log(‘

一. 前端为何要进行打包和构建代码层面角度：从项目管理角度：二. module、chunk、bundle的区别：

问题解决：entry: path.resolve(__dirname, '../src/index.js'),output: { filename: '[hash].bundle.js', path: path.resolve(__dirname, '../build')},路径尽量都用绝对路径。

文章目录前言一、Happypack 作用？二、Happypack 的使用安装使用（三步操作即可完成）一、安装完成之后引入 HappyPack二、将常用的 `loader` 替换为 `happypack/loader`三、创建 HappyPack 插件三. Happypack 示例使用单个 loader 时使用多个 loader 时四. Happypack 配置项五. 个人总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机

最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口先来上一个例子：con...

webpack作为一个模块打包器，主要用于前端工程中的依赖梳理和模块打包，将我们开发的具有高可读性和可维护性的代码文件打包成浏览器可以识别并正常运行的压缩代码，主要包括样式文件处理成css，各种新式的JavaScript转换成浏览器认识的写法等，也是前端工程师进阶的不二法门。构建的作用及常见功能构建就是当源代码无法直接运行时，通过转化将源代码转换成可执行的 JavaScript、Css、H...