我们按照这个走一遍.
起步,,
引入lodash 报错.
image.png
import _ form 'lodash'
改成
import _ from 'lodash';
低级错误,浪费7分钟.
疑问
webpack命令 和npx webpack有什么区别?
npx 是什么
介绍npx：一个npm包执行器
npx 是什么？
1、临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
2、可以执行依赖包中的命令，安装完成自动运行。
3、自动加载node_modules中依赖包，不用指定$PATH。
4、可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。
结论1. 用这个可以不用install?
结论2. 用这个比不用这个要好?
加载css
发现一个报错,但不影响使用
Path must be a string. Received undefined
npx报错“Path must be a string. Received undefined”in windows解决方法
系统变量的path 在哪里?
path 是干什么的?
path变量告诉系统, 当要求系统运行一个程序而没有告诉它程序所在的完整路径时, 系统除了在当前目录下面寻找此程序外, 还应到path变量指定的目录下去寻找。一般我们修改环境变量时如果没有指定具体的变量
按照方法,把路径添加在nodejs前面,但依然报错.
由于该问题,目前看起来对运行没有什么影响, 文件打包正常,先掠过去.
浪费15分钟以上了都.
加载 scss 文件
postcss
样式抽离
mini-css-extract-plugin
疑问有这样一句
const devMove = process.env.NODE_ENV !== 'production';
我猜都能猜出来, 是判断现在是生产环境还是开发环境,
但我想知道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 , 把文件名改掉,比如加上版本号,
- 不能所有文件都一起更新, 让有更新的才变更 文件名.
----- 这就跟我们学得webpack hash,chunkhash,contenthash 有关系了.
----- 但怎么部署?覆盖式发布 互相依赖关系的文件,部署有先后时, 会出问题- 用非覆盖式发布, 先部署静态资源,不覆盖原来的资源,
然后再部署html 就能解决这个问题. 我说不清, 看原文吧.
然后作者说, 想要实现这个,必然是一个 工程问题.
有点明白前两天接触webpack分包时,提到的长期存储策略了.
继续向下走.
果然报错,
image.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 --config build/webpack.config.js是什么意思?
image.png
先不管了， 我猜测是， 根据指定的文件进行构建的意思
报错
image.png
猜测，是路径的问题，改成
"build-win": "SET NODE_ENV=development && webpack --config webpack.config.js",
报同样的错,
image.png
写错了
const devMove = process.env.NODE_ENV !== 'production';
改成 devMode....
const devMode = process.env.NODE_ENV !== 'production';
报错
image.png
之前一般是, options 出问题的时候, 报这种错,
他说 不认识这个属性 "NODE_ENV"
把下面这句注释掉.
//NODE_ENV: process.env.NODE_ENV || 'development',
出错, 样式没有添加上,
需要手动引入
压缩 CSS
没报错,插件全都引用,但代码没被压缩.
optimize-css-assets-webpack-plugin npm
复制了一份官网的,也还是没有压缩.先略过去.
js 压缩
崩溃，跟css一样， 这个也没有进行压缩， 也没有报错。。
先略过去
清理dist
加载图片
报错，真的是次次都报错，明明成功过的还是报错，，呵呵。。
image.png
image.png
猜测， 似乎是 loader 没有被引用？
实验， 把 url-loader 删除，构建一下，看报错的类型是否相同。
image.png
果然， 看来是 loader 没作用上。
为什么会没作用上？
- 我没下载安装？
下载安装还是报错。 - 怀疑， 跟我之前改变系统环境变量有关？
测试，另外构建一个文件项目，测试 scss和url loader, 如果失败，
则环境变量出错的可能性增强， 如果没出错， 则是我项目本身里有问题。
经测试， url-loader 和 scss-loader 在本机另一个项目中是正常的。
问题肯定还是在我自身的设置上。 - 找到问题， 是拼写错误。。妈的
不是 test : /.(png，jpg)/,而是 test : /.(png|jpg)/, 怎么会犯这种错误，
而且竟然没看到。。
报错，
image.png
之前看视频的时候， 说 Img文件不能用 contenthash,
我想试一下 chunkhash, 结果不行。
·clean-webpack-plugin·
这个插件虽然好用， 但似乎挺耗费时间的，是我电脑的问题吗。
图片压缩
image-webpack-loader可以帮助我们对图片进行压缩和优化。
npm install image-webpack-loader --save-dev
使用之前图片文件的大小是 27,627 个字节
使用之后图片文件的大小时18,612 个字节
有用啊~
字体的处理（同图片）
这个先不写了.
js 使用 source map
使用前.
image.png
使用后
image.png
确实有效果,
但说不能用于生产环境.
webpack-dev-server
报错,
似乎必须要把 输出的 html 文件的名字 弄成 index.html
如果改成其他的似乎无法自动刷新.
比如 main.html
我以为加上下面这句就可以,
devServer:{contentBase : './dist/main.js'}
但不行.
JS启用babel转码
出了问题,
输出的main.js文件很大, 似乎是把 lodash 里的内容加了进去?
不清楚,..
哦明白了,是因为babel 插入了什么辅助代码?
babel 在每个文件都插入了辅助代码，使代码体积过大.babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。 默认情况下会被添加到每一个需要它的文件中。你可以引入 babel runtime 作为一个独立模块，来避免重复引入。
原来 babel runtime 是用来把辅助代码独立出来的?
.babelrc 文件,不能放在 src文件目录下, 要放在 根目录下.
可以随便起名字, 比如 a.babelrc b.babelrc
如果没起名字,虽然会作用上,
但文件不可见.
似乎也可以写成 babelrc.json 这样子.
很烦, 这两天状态不好,心态不好是一方面.
另一方面是, 学习webpack 感觉效率很低.
首先webpack 本身应该不会太难,
我们主要是要学各种配置,能够运用各种loader,plugin 即可.
webpack 不难在于, 这种配置不需要去思考,代码上的逻辑,
或者说逻辑都是比较简单的.
只需要清楚的知道构建需求是什么,
能够找到相应的 loader / plugin,
知道配置项和结果/效果之间的因果关系即可.
但另一方面又觉得webpack 有点难, 学习效率有点低.
这种低效率表现在,
- 首先,不得不说, 是有一定的单词量的.
- 他是有可能出现各种各样的报错信息的.
大多数的报错信息也是大量的新单词,
并且有很大一部分是百度搜索起来费劲的.
而且即使搜索出来,进行阅读,因为这种文档第一次的接触,
阅读本身也会消耗很多的时间. - 最恶心的一个地方是, 每次修改 webpack.config.js 都需要进行打包.
如果需要相应的loader 或者plugin 还需要用npm 下载.
每次这个过程都会消耗一些时间, 并且会打断思路,
如果再有报错这种现象一并发生,
则消耗的时间会大大增加.
算了以上都是借口,
不过,我觉得webpack 最后用的时候,
把相应的package.json 和 webpack.config.js 拿过来用就好了.
相比于真正的代码,
这种配置, 其实很适合 复制粘贴,然后进行简单的修改.
如果最终是这样运用的话,
我们的学习要求则可以稍微改一下,
- 掌握最常用的配置.
- 学会读懂大部分的报错信息,(这很关键啊,否则每次都看不懂,那不是傻了嘛?)
- 搜索,并学会看 各种 loader plugin 的npm 官网上的 文档.
哎,,最难受的就是, 明明感觉也不难, 就是浪费很多时间的事实,让人很心痛.
算了算了
再来一次
报错，
postcss 没配置 options
优化图片。。
报错
image.png
一般这种错误就是语法错误
const add = require(./common/common.js);
少了引号,改成,
const add = require('./common/common.js');
babel 配置 记不住啊,记不住.
报错,
image.png
一般就是options 错了.
很上火,, 复制粘贴也不好使.
找到了, 写错位置了,应该写在rules , 写错在了 某个use 上了.
翻白眼..
网友评论