webpack的一些点--持续更新

1.webpack如何自动刷新

首先webpack --config webpack.config.js --watch

然后publicPath: '/dist/'

然后 webpack-dev-server --inline --port 8088

有挺多文章都讲了各种七七八八的，不过就这种生效了，不过这些文章里也讲了很多相关的东西

https://www.jb51.net/article/135251.htm  https://www.cnblogs.com/hellohello/p/7794392.html  https://blog.csdn.net/connie_0217/article/details/79792317  https://newsn.net/say/webpack-watch.html

注意 这个只是webpack的全局刷新，你可以看到浏览器那个刷新图标转了一下

还有一个是webpack的热更新，它不会让浏览器重新刷新，而只是局部刷新，这个是重要功能，像vue等项目的刷新都是用的这个

那么如何开启呢

https://www.cnblogs.com/thonrt/p/6595033.html https://www.cnblogs.com/wuxianqiang/p/10326390.html  https://segmentfault.com/a/1190000022783830这几篇文章讲了一点  

关于webpack webpack-cli webpack-dev-server 可以看到有很多配置啥的  他们可以写在对象里 也可以直接--来写在命令里  比如中间的--color啥的

至于还有哪些命令 应该可以去官网看看，能找到 https://webpack.docschina.org/concepts/configuration/ webpak官网

2.然后出现  webpack-dev-server: command not found等问题

都是通过 npm  i  xxx -g全局安装就好了，还不好就删除nodemodules 然后再npm i

3.关于source-map

这里就是source-map使用前后的对比，显然开启之后可以调试到原代码

4.一篇好文

https://segmentfault.com/a/1190000020338771?utm_source=tag-newest

讲vue-cli-service的，其中有个地方让我想起了一个点

"

1. 加载环境变量，从项目根目录下的.env.(mode)文件读取环境变量，并写入到process.env（声明环境变量必须是VUE_APP_*，不然会被过滤掉）

"

我想起研究 .env.development和.env.production的时候也看到过说给vue解析的环境变量必须是VUE_APP_开头，原来是这样，这里讲明了，是内部编译的时候这样规定处理了

不过我有个疑问，就是有的vue项目，比如我电脑上的，是直接这样

"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 运行webpack-dev-server 

有的，比如公司的vue项目

vue-cli-service serve 这样运行

它们都是2点几的vue项目

为什么会有这两种不通的运行方式呢，它们又有什么区别和优缺点呢

5.之前一直是在package.json里的script命令里运行的时候设置process.env.NODE_ENV=development或者是production

今天看到一篇文章说webpack4以上可以通过设置webpack的mode来设置，也就是你写mode:'develpment'就相当于写了process.env.NODE_ENV=development，可以写在配置文件里

也可以写在package.json里的script命令里 加--mode=development

就觉得这个挺不错的，简化了一些

但是看到一篇文章讲了一下这个有个缺点，就是这样设置的话，只能在入口main.js里开始拿到process.env.NODE_ENV的值，而webapck.dev.js配置文件里是拿不到的，只有undefined

试了一下，是这样的 

文章在这儿 https://cloud.tencent.com/developer/article/1808196

其中还谈到DefinePlugin这个插件，个人觉得作用就是可以根据当前环境动态设置和改变一些全局的变量，从而让项目的各个地方变换灵活，虽然也可以通过直接判断process.env.NODE_ENV就是了，哈哈，关于这个插进，上面这个文章里也讲了

https://blog.csdn.net/wushuitaolove/article/details/103044772这个文章也讲了defineplugin

6.webpack-chain是什么

它是一个为了让webpack配置更便利的第三方库，真叼，能人真多啊

这篇文章，讲的可以 https://blog.csdn.net/vv_bug/article/details/107319774 其实就是本来你是在对象里一个个填，没提示，还得看文档看看属性，除非你都记得呗，用这个的话可以链式调用，不再是写对象里填那样，而且还有提示，是不是很爽，就像从原生写dom到用jquery这样的过程，这个相对于原生配置webpack，就相当于jquery

vue cli中也有个chainWebpack以及configureWebpack

其中这个chainWebpack官网也说就是基于webpack-chain来实现了，好像使用起来也没太大差别

注意vue cli的这些配置都是在项目中，自己建一个vue.config.js里写的，如果有啥不会写的，直接取vue-cli官网看就好了

其实就是通过这个文件可以间接配置到webpack.dev等文件，因为vue3等不给用户webpack.dev等文件了，所以开放这个文件来给要用户配置  不过vue2.几版本还是webpack.dev等文件都有的，build文件夹里

关于webpack-chain具体怎么用的可以看看这两篇文章

https://blog.csdn.net/vv_bug/article/details/107319774

https://www.shangmayuan.com/a/530a6a73a248495780c17fba.html

7.

而关于vue cli中的configureWebpack，官网也说了，就是基于webpack-merge实现的

具体其实可以看看这两篇文章，讲了webpack-merge以及chainWebpack和configureWebpack优劣

还讲了，为什么vue3之前暴露webpack配置给你，vue3之后就集成到vue.config.js里了，比让你直接配置wepack了

https://www.cnblogs.com/cczlovexw/p/11765571.html

https://bbs.csdn.net/topics/393535831

关于configureWebpack具体咋用的

https://blog.csdn.net/playboyanta123/article/details/103528594这篇讲了点

8.webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

https://cloud.tencent.com/developer/article/1808196

9.vue-cli-service与webpack-dev-server的区别

以及vue-cli-service到底是啥，想搞懂它，webpack-dev-server我已经大致明白了，其实就是个express服务器，vue-cli-service又是什么，又有什么不同呢

这几篇文章讲的没看太懂，但是先记着 https://segmentfault.com/a/1190000020338771

https://stackoom.com/question/3yqx8/vue-cli-service%E6%9C%8D%E5%8A%A1%E5%92%8Cwebpack-dev-server%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB-%E5%9C%A8docker%E4%B8%AD

明天再搞吧