it老马webpack入门教程；
让我们来看看这个。
开始，
引入lodash报错。
图片.png
import_form 'lodash'
变成
import_from 'lodash';
低级错误，浪费了7分钟。
怀疑 webpack 命令和 npxwebpack 有什么区别？
什么是 npx
介绍 npx：npm 包执行器
什么是 npx？
1、临时安装可执行依赖包，无需全局安装，无需担心常年污染。
2、可以执行依赖包中的命令，安装完成后手动运行。
3.自动加载node_modules中的依赖包，无需指定$PATH。
4.可以指定节点版本和命令版本，解决了不同项目使用不同版本命令的问题。
推论1. 不安装可以使用吗？
推论 2. 使用它是否比不使用它更好？
加载CSS
发现错误，但不影响使用
路径必须是字符串。 收到未定义
Windows 解决方案中的 npx 错误“Pathmustbeating.Receivedundefined”
系统变量的路径在哪里？
win7笔记本修改环境变量的方法
路径有什么作用？
路径变量告诉系统，当需要系统运行一个程序而不告诉它该程序所在的完整路径时，系统不仅要在当前目录下搜索该程序，而且还要在该目录中搜索由路径变量指定。通常当我们更改环境变量时，如果不指定具体变量
按照方法，在nodejs中添加了路径，但是还是报错。
因为这个问题，目前看来并没有对运营造成什么影响。 文件打包正常，我先飞过去。
浪费了超过15分钟。
加载.scss文件
后CSS
风格提取
迷你 CSS 提取插件
有这样一句话有疑问
constdevMove=process.env.NODE_ENV!=='生产';
我猜你能猜到是生产环境还是开发环境。
但我想知道 process.env.NODE_ENV 的数量是多少？
后端工程项目的NODE_ENV，
NODE_ENV是我们自己设置的吗？
new MiniCssExtractPlugin({
filename : devMode ? '[name].css' : '[name]_[hash:8].css',
chunkFilename : devMode ? '[id].css' : '[id]_[hash:8].css'
})
从这里你可以学到，
在开发环境中，通常不设置哈希值。
在生产环境中，通常设置哈希值，
想知道为什么生产环境应该有不同的文件名？
webpack中hash、chunkhash、contenthash的区别
关于Webpack中hash的使用
明白了，
主要和缓存有关。 如果维护的源文件发生变化，对应的生产文件的哈希值就会发生变化，浏览器可以根据变化进行缓存。
在大公司如何开发和部署后端代码？
真是大师啊，文笔清晰，流畅，有趣。
让我说对
缓存要求极高并且必须进行设计？
有了更深的认识。
为了优化网络请求并节省性能，可以做什么？
1.暂时用304重定向，
2.强制缓存。 即不允许浏览器发送刷新请求。
-----如何更新？
3.更改URL，更改文件名，例如添加版本号，
所有文件不能同时更新，有更新时仅更改文件名。
-----这和我们学习webpackhash、chunkhash、contenthash有关系。
-----但是如何部署呢？ 叠加发布相互依赖的文件，当部署有顺序时，就会出现问题。 采用非覆盖发布，优先部署静态资源，不覆盖原有资源。
稍后部署html就可以解决这个问题。 我无法解释清楚，请阅读原文。
后来作者说实现这个一定是一个工程问题。
我大概明白了三天前接触webpack打包传递时提到的全年存储策略。
继续上升。
果然报错了，
图片.png
//...
NODE_ENV: process.env.NODE_ENV || 'development',
//...
webpack.config.js里我们加上这句,看看行不行.
问题是在哪里加?
放在 module.export 里不好使啊..
还有一种写博客的方式，在package.json中
"scripts": {
"build-win": "SET NODE_ENV=production && webpack --config build/webpack.config.js",
"build": "EXPORT NODE_ENV=production && webpack --config build/webpack.config.js"
}
webpack--configbuild/webpack.config.js 是什么意思？
图片.png
现在不管它，我猜这意味着按照指定的文件来完善它。
报告错误
图片.png
推测是路径问题。 将其更改为
"build-win": "SET NODE_ENV=development && webpack --config webpack.config.js",
报告同样的错误，
图片.png
错误
const devMove = process.env.NODE_ENV !== 'production';
改成 devMode....
const devMode = process.env.NODE_ENV !== 'production';
报告错误
图片.png
过去，这些错误通常是在选项出现问题时报告的。
他说他不认识属性“NODE_ENV”
注释掉下面这句话。
//NODE_ENV: process.env.NODE_ENV || 'development',
出现错误，样式没有添加，
需要自动引入
压缩CSS
不报错webpack 引入报错，引用了所有插件，但是代码没有压缩。
优化-css-assets-webpack-pluginnpm
我复制了官网的一份，还是没有压缩。 先跳过吧。
js压缩
崩溃，和css一样，这个没有压缩，也不报错。 。
先跳过
清晰的距离
加载图像
报错，真是每次都报错webpack 引入报错，就算成功了，还是报错，呵呵。 。
图片.png
图片.png
想必是没有引用loader吧？
实验一下，删除url-loader，构建一下，看看报错类型是否一样。
图片.png
果然，看起来loader并没有什么作用。
为什么不起作用？ 我没有下载安装？
下载安装还是报错。 疑惑，是不是和我之前更改系统环境变量有关？
测试，再创建一个文件项目，测试scss和urlloader，如果失败，
那么环境变量出错的可能性就增加了。 如果没有错误的话，就是我的项目本身有问题。
经测试，在本机的另一个项目中url-loader和scss-loader均正常。
问题肯定还是出在我自己的设置上。 发现问题了，是打字错误。 。妈的
不是test:/.(png,jpg)/，而是test:/.(png|jpg)/，怎么犯这些错误，
但我没有看到。 。
报告错误，
图片.png
之前看视频的时候说Img文件不能使用contenthash，
我想尝试 chunkhash，但没有成功。
·clean-webpack-插件·
这个插件其实很好用，但是其实要花很多时间。 难道是我的笔记本电脑有问题？
图像压缩
image-webpack-loader可以帮助我们压缩和优化图像。
npm install image-webpack-loader --save-dev
使用前的图像文件大小为27,627字节
使用后的图像文件大小为18,612字节
有用~
字体处理（如图）
我不会再写这个了。
js使用sourcemap
使用前。
图片.png
使用后
图片.png
确实有疗效，
但它说不能在生产环境中使用。
webpack-开发服务器
报告错误，
虽然需要将输出html文件的名称更改为index.html
如果改成其他的，则无法手动刷新。
例如main.html
我想添加下面这句话就可以了，
devServer:{contentBase:'./dist/main.js'}
但不是。
JS启用babel转码
出了些问题，
输出的main.js文件很大，虽然里面添加了lodash中的内容？
没有把握，...
哦，我明白了，babel 插入了什么辅助代码？
babel 在每个文件都插入了辅助代码，使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。 默认情况下会被添加到每一个需要它的文件中。你可以引入 babel runtime 作为一个独立模块，来避免重复引入。
本来babelruntime是用来分离辅助代码的？
.babelrc文件不能放在src文件目录下，而应该放在根目录下。
可以取任意名称，例如 a.babelrcb.babelrc
如果你不选择名字，虽然它会起作用，
但该文件不可见。
虽然也可以写成babelrc.json。
很烦人，这三天状态不好，态度不好是一方面。
另一方面，学习webpack感觉效率很低。
首先，webpack本身应该不会太难。
我们主要需要学习各种配置，以便使用各种加载器和插件。
Webpack并不难，因为这些配置不需要考虑代码的逻辑，
换句话说，逻辑比较简单。
您只需要清楚了解设立要求是什么，
要找到相应的加载器/插件，
知道配置项与结果/疗效之间的因果关系就足够了。
但另一方面我觉得webpack有点难，学习效率有点低。
这些低效率表现在，
首先，必须说的是，有一定数量的短语。 可能会出现各种错误消息。
大多数错误信息也是大量新词组，
而且很大一部分是费力去百度搜索的。
但即使经过搜索和阅读，由于第一次接触这些文献，
阅读本身也会消耗大量的时间。 最难受的地方之一就是每次webpack.config.js一改，就需要打包。
如果需要对应的loader或者插件，需要使用npm下载。
每次这个过程都会消耗一些时间，并且会打断思路，
如果再次报错并且这些现象同时出现，
消耗的时间将会大大减少。
算了，以上都是借口。
不过，我想当最终使用webpack时，
只需获取相应的package.json和webpack.config.js并使用它们即可。
与真实代码相比，
这些配置虽然非常适合复制粘贴，但稍后进行简单的更改。
如果最终这样使用的话
我们的学习要求可以稍微修改一下。
掌握最常用的配置。 学会理解大部分的错误信息，（这个很重要，不然每次都看不懂，那不是很傻吗？）搜索，学会阅读npm官网的各种loaderplugins文档。
哎，最可悲的是，明明以为不难，却浪费了很多时间，让我心疼不已。
忘了它
再次
报告错误，
postcss不配置选项
优化图像。 。
报告错误
图片.png
通常这些错误是句子错误
const add = require(./common/common.js);
少了引号,改成,
const add = require('./common/common.js');
不记得babel配置了，记不住了。
报告错误，
图片.png
通常选项是错误的。
很郁闷，复制粘贴不行。
我找到了，但是我把位置弄错了。 应该是规则里写的，但是我在某个使用的时候犯了一个错误。
翻个白眼...
