qq_40044977的博客

前置开发环境优化打包构建速度 HMRHMR（模块热替换）优化代码调试 souceMap生产环境优化打包构建速度* oneof* babel缓存* 多进程打包（提升打包速度，但是进程开启交流有时间开销）* externals （不让一些资源包去打包，排除掉）-- cdn* dil （先打包好，后面直接用，就不用打包了）-- 自己的服务器优化代码运行的性能* 缓存（hash-chunkhash-contenthash）* tree shaking* code sp

开发环境只是能让代码运行成功运行项目指令：webpack 会将打包结果输出如果想指定输出路径 需要在module对应匹配配置中加 options: { outputPath: 'imgs'}样式文件不会输出，是因为【css-loader】打包到js文件里了npx webpack-dev-server 只会在内存中编译打包，没有输出生产环境问题一：打包后，如果css在js中，会使js文件过大，先加载js才能通过创建style标签加入到页面中，会有闪屏的问题解决：提

概念开发服务器： 用来自动化（自动编译，自动打开浏览器，自动刷新浏览）特点：只会在内存中编译打包， 不会有任何输出启动devServer指令为：webpack-dev-servernpx webpack-dev-server (本地)devServer: { // 项目构建后路径:该配置项允许配置从目录提供静态文件的选项（默认是 'public' 文件夹）。将其设置为 false 以禁用 static: ['src'], // 启动gzip压缩 compress: tr

webpack.config.jswebpack.config.js — webpack配置文件作用： 指示 webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）所有构建工具都是基于nodejs平台运行的。模块化默认采用commonjs(module.exports =)src — 项目代码 （es6 模块化 import）打包样式资源关键用 use: [‘style-loader’, ‘css-loader’ , ‘less-loader’]css-loa

是一种前端资源构建工具，一个静态模块打包器。前端所有的资源文件（js/json/css/img/less/…）都会作为模块处理。根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。基本流程： 从入口文件引入（各种包、资源 === 静态模块） => 形成chunk(代码块) => 按不同的资源进行处理（打包）=> 输出bundle安装依赖方式npm install --save-dev webpacknpm install webpack@4.41.6 -.