webpack 是一个模块打包器。webpack 的次要指标是将 javaScript 文件打包在一起，打包后的文件用于在浏览器中应用，但它也可能胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

我的项目开发过程中1.通过实现一个modules配置文件注册独立模块的文件门路及设定的各项可配置参数，通过配置启动命令额定参数，在webpack.config.js，获取process.argv中所需的模块id，而后获取该模块的公有配置，可简略将可配置项置入modules.json中，也能够设定在模块门路内设置独有的webpack.private.js文件作merge操作。2.

最近工作中webpack用的比拟多，想零碎的学习一下，找到了极客工夫的教程，跟着视频上讲的学了一遍，播种挺大的。尽管视频教程是2019年出的，有点老，有些常识曾经过期了，但并不障碍学习。那些过期的常识全当理解，能够搜寻寻找代替计划。学习资源：玩转webpack，上面是我的学习笔记。

通过 webpack-dev-server 的这些配置，可能以多种形式扭转其行为。这是一个根本的示例，利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务(serve)：

Webpack 是一种前端资源构建工具，一个动态模块打包器。一个前端我的项目中蕴含了很多资源，然而浏览器并不一定全副意识，比方sass、less、ts，包含js里的高级语法。这些资源如果想在浏览器中失常工作，必须通过编译解决。而咱们的Webpack就是能够集成的解决这些文件，并且汇总到一个文件中。

string –> ‘./src/index.js’单入口打包造成一个chunk。 输入一个bundle文件。此时chunk的名称默认是 main

在理论开发要求中咱们可能无奈是应用单页面开发框架（例如vue，react），这些要求次要是基于SEO角度登程（当然能够应用服务端渲染解决，这里咱们不思考），这时候咱们就须要进行传统模式的前端开发，传统模式下会有css兼容与压缩，icon图片base64化缩小http申请，公共代码引入，js模块化等根底问题。对于wepack多页面打…

mode: development\productionentryoutputdevtoolcontentBaseopenportproxyhotoptimizationtree shaking: 过滤导入没用的代码；production下默认关上package.json: sideEffectscode splitting 代码宰割 {代码…} 缓存： output：filename: [name].[contenthash].jsshimming懒加载 lazy loading：通过import动静引入，实…

一、在根目录新建vue.config.js,设置动态资源门路为’./’,否则打包后我的项目无奈运行 {代码…} 二、敞开生产环境下的SourceMap映射文件,包的大小缩小80% {代码…} 三、进行跨域配置 {代码…} 四、配置 alias 别名 {代码…} 在配置实现后，咱们在我的项目中能够这样写门路 ： {代码…} 五、应用CDN 减速优化CDN优化是指把第…

本节咱们学习 webpack 的模块热更新，也能够叫做模块热替换。其目标是为了放慢用户的开发速度，进步编程体验，不便开发人员在不刷新页面的状况下，就能批改代码，并且直观地在页面上看到变动。这个性能次要用于开发过程中，对于生产环境没有任何帮忙。