为什么用webpack

终于彻底搞明白了,webpack-devServer使用、运行流程、实现原理、常用配...

使用 ：首先，你需要通过npm或yarnwebpackdevServer。配置：更新webpack配置文件，通常在webpack.config.js中设置相关选项。启动：在package.json中添加启动命令，如npm start或yarn start，用于启动webpackdevServer。运行流程 webpackdevServer启动后，会利用webpack进行实时编译。

首先，webpack-devServer是一个关键，它能提升开发效率，通过实时编译和自动刷新浏览器，避免每次代码修改后的重复打包过程。它与webpack-dev-middleware紧密相连，后者是一个将webpack编译结果存储在内存中的容器，用于处理express服务中的资源请求。

webpack-dev-middleware：内存中的文件webpack-dev-middleware就像是一个内存中的文件，它能实时监听文件变化，将webpack编译后的文件存储在内存中，并通过express服务将内容返回给用户。当文件改变，它能快速更新，无需磁盘IO。

在package.json文件的scripts部分，添加启动命令rve，例如：rve： webpack rve。配置webpack.config.js：在webpack.config.js文件中，新增devServer节点进行配置。基础配置：设置服务器监听的和允许访问的host。其他配置：根据需要配置跨域等功能，具体配置请参考webpackdevrver。

webpack-cli在webpack打包中的作用小结

1、webpack-cli 是一个在命令行中运行webpack的。在命令行中npm run build 时，会node_modules/.bin目录下的webpack可文件。

2、 webpack 同时 webpack-cli ， webpack-cli 的作用就是能让 webpack 打包命令顺利。

3、使用TerrWebpackPlugin（对于webpack 4/5）或uglifyjs-webpack-plugin（用于webpack 3）对进行压缩。配置时需注意，通常在使用vue-cli时，已对terr-webpack-plugin进行了优化调整，故在自定义配置时，主要关注是否在生成环境中移除console和debugger等元素。

4、webpack把我们所有的文件都打包成一个文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。使用babel-minify-webpack-plugin插件可以帮助减少json文件的体积。