qq_38935512的博客

常见的打包工具对比webpack:适用于大型的项目，开始就需要通过入口文件开始打包，一次性加载所有的资源。vite：实时的打包，开始不会进行打包，所以启动非常快，直接请求所需模块并实时编译rollup：适用于基础裤的打包，基于ES6打包，打包文件小且干净，执行效率更高，vue、react都是基于他打包的grunt、gulp：是一个多任务得构建工具，跟jq很像找到一个文件做一系列得操作形成一个任务，整个就是一个任务得集合...

前沿最近看webpack有个疑惑：productionSourceMap和devtool这两个属性功能貌似一样，都是解决生产环境报错定位困难的问题查了一些资料1.devtooldevtool:他是webpack的属性，在webpack文档中能找到https://v4.webpack.docschina.org/configuration/devtool/#root下面是他的一些选项，根据实际情况例如生产环境不想暴露源码可以选择对应的值，文档中说的也是比较清楚的。下图他的一些打包性能也是比较清

前沿：一个陌生而又成熟的项目webpack打包往往很慢，这时候我用到了webpack-bundle-analyzer这个webpack的分析工具配置非常简单： 1.安装npm/cnpm install --save-dev webpack-bundle-analyzer 2.配置config/index.jsmodule.exports = { build: { ... // Run the build command with an extra argument to

https://www.cnblogs.com/tugenhua0707/p/9464984.html

问题实际开发过程当中，例如url 会根据不同得环境不一样，有分测试，开发，生产，预生产等，可以根据不同得环境来配置不同得环境变量，下面解决过程基于node10以上1.第一步：在package.json中配置脚本通过 --e test --e prod来告知webpack打包得环境，平常来说webpack是无法识别得需要借助插件yargs注意：这里想特别说明一下的是，vue-cli脚手架帮我们生成好了整个项目，而且也有对应webpack.dev.conf.js和webpack.prod.conf.

1. 前端为什么要进行打包和构建？1.体积更小，加载更快2.能编译高级语法，可以通过打包工具来转化例如TS,ES6等3.代码错误检查4.可以统一代码规范，构建流程，产出标准2.module chunk bundle区别其实就是同一份逻辑代码在不同转换场景下的取了三个名字,我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。module：开发中的每一个文件都可以看作是module，模块不局限于js，也包含css，图片等。ch

webpack使用通过配置脚本和.env文件配置变量，然后通过process.env.xxx来访问

chainWebpack和configureWebpackvue-cli 配置文件vue.config.js 文档地址https://cli.vuejs.org/zh/config/#configurewebpack下面就是对他们简单的一个介绍点击进入 配合webpack>… 进入到webpack文档我这里总结下 这两个怎么用。configureWebpack：会被 webpack-merge 合并入最终的 webpack 配置,有两种写法。里面可以配置一些基础的信息，不过vue.co

1.webpack中 plugins是如何执行得webpack得核心文件是 compiler.js，======webpack/lib/compiler.js.里面搜索plugins 我们可以发现，在350行左右 new 了一个compiler，然后判断是否存在plugins ，有得话就循环调用他得apply方法。知道了这个以后我们可以简单得写一个插件新建一个文件夹 plugins,里面新建一个DonePlugins.jsclass DonePlugins { apply(compi

loader:是webpack中得一个重要概念，主要作用就是将一串代码转换成另一串能识别得代码，是webpack得模块加载器。1.简单得搭建一个环境1.新建文件夹 wepack-loader2.npm init -y 初始化项目3.npm install webpack@4.0.0 webpack-cli@3.3.12 -D4.新建src文件夹，里面新建一个index.js,放入内容 console.log(index.js)5.稍微简单得写下配置文件，新建webpack.config.js

1.搭建一个最基础的环境（用于测试）新建一个文件夹 webpack-test1.初始下项目 npm init -y2.安装webpack webpack-cli npm install webpack@4.0.0 webpack-cli@3.3.12 -D3.简单配置下文件src/index.jsconsole.log("asda");配置文件let path = require("path");module.exports = { mode: "development"

tapablewebpack本质上是一种事件流机制，工作流程就是将各个插件串联起来，实现得核心就是tapable，核心得原理也是类似于node.js得events库，依赖于发布订阅模式。查看源码，编译模块compiler.js。tapable引入了各种钩子，有同步有异步得，靠他们串联写个简单得插件，注册事件 启动事件，这里因为我是新建项目，本来想用两个文件写得import 无法解析，所以暂时写在一个文件上，也可以去配置下setting.json，不过问题不大。同步钩子class SyncHo

什么是webpack，模块打包机，功能就是通过入口将所有得依赖关系打包成静态资源。功能：1.实现代码得转换（es6转es5，css转换）2.文件优化（压缩代码体积，合并文件等）3.代码分割（公共模块得抽离，路由懒加载）4.模块合并（功能分类合并模块）5.自动刷新（热更新）6.代码校验7.打包后自动发布1.Webpack 安装（找一个空文件夹）1、npm init -y（也可以不加y）后面添加 -y参数，帮助我们自动进行确认，直接生成项目2、npm install webpack@