webpack 插件中文文档
参考
vue-loader详解: https://segmentfault.com/a/1190000020629508
html-webpack-plugin详解: https://www.cnblogs.com/wonyun/p/6030090.html
webpack配置
在 build 目录下创建webpack配置文件 webpack.config.js ,提供 入口(entry) 、 模式(Mode) 、 输出(output) 、 模块(Module) 、 插件(Plugins) 、 开发服务器(DevServer) 等配置选项。
0x02.项目运行
npm scripts 配置
在npm脚本中新增webpack命令,执行的命令会自动去 node_modules 寻找,不用加上目录。
修改 package.json 配置
.
…
“scripts”: {
“build:dist”: “webpack --config build/webpack.config.js”,
“dev”: “webpack-dev-server --config build/webpack.config.js”
},
…
.
cross-env配置
cross-env是一款运行跨平台设置和使用环境变量的脚本,不同平台使用唯一指令,无需担心跨平台问题。
修改 package.json 配置
.
…
“scripts”: {
“build:dist”: “cross-env NODE_ENV=development webpack --config build/webpack.config.js”,
“dev”: “cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js”
},
…
.
运行测试
命令行窗口中,在该项目根目录下输入 npm run dev 即可进行本地开发调试。
成功运行后,项目第一个页面结果如下:
最终目录结构:
0x03.示例代码
https://github.com/andurils/code-examples/tree/main/learning-element2/step00
码字不易,如果觉得本篇文章对你有用的话,请给我点赞!后续会有更多的干货分享,请持续关注!
读者福利
========
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
R0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)