2023年11月29日发(作者：)
webpack碎⽚知识整理
1.关于NODE_ENV
通常情况下我们习惯将和分别对应开发环境和⽣产环境
npm run devnpm run build
--mode=development--mode=production
⽂件中⼀般要设置mode值：和，
webpack --mode=production
会将 _ENV 的值设为 development。启⽤ NamedChunksPlugin 和
NamedModulesPlugin。
webpack --mode=productionDefinePlugin_ENVdevelopmentNamedChunksPlugin
NamedModulesPlugin
会将 中 的值设置为 。启⽤ 和
细微差别但是实际差很多，如果按照前者所说，在中应该直接获取到的值，实际并没有获取到。
NODE_ENV
由此可见并不能通过的值设置全局_ENV，那么只能通过NODE_ENV=development和
--mode=development
NODE_ENV=production来设置了。
-env
windows在使⽤NODE_ENV=production时会报异常，因此需要使⽤cross-env进⾏设置
相关说明
loader全部都写在module的rules⾥
常见的loader有：
babel-loader（处理js，可以将ES6语法转为ES5以下），
css-loader等，包括less-loader和style-loader，处理样式，⽀持样式引⽤和less语法，
url-loader，处理样式中的图⽚和字体处理
html-withimg-loader，处理html中的本地图⽚（⼀般将图⽚资源放在oss上）
4.⽂件路径问题
起因：路径填写的是基于开发时的路径，在打包成⼀个⽂件后路径修改为基于html ⽂件的，这时需要使⽤url-loader，然⽽在css⽂件中引⼊
img时，会因为url-loader的设置引起错误
不想写了，这⼈写的挺好的看这个吧 /post/5b8d1e926fb9a019b66e4657
e设置script问题
待更新
6.⾃定义插件
插件中必须有apply⽅法，否则在使⽤插件时会报错：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- s[0] misses the property 'apply'.
function
-> The run point of the plugin, required method.
常见拼写错误
例如拼成时：
pluginsplugin
-configuration has an unknown property 'plugin'
loader中
optionspresetspreset
的拼成了：
Error: Unknown option: .preset. Check out ······
发布评论