02｜Webpack编译搭建：如何用Webpack初构建Vue 3项目？
Webpack 和 Vite 有什么区别？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何使用Webpack构建Vue 3项目，重点强调了在企业级项目开发中稳定性和可用性的重要性。作者首先解释了为什么选择使用Webpack而不是Vite，并通过实际操作和详细解释，帮助读者了解了如何使用Webpack搭建Vue.js 3项目。文章包括了项目目录和源码准备、安装依赖、配置Webpack的Vue.js 3编译配置以及执行Vue.js 3编译的步骤。其中涵盖了开发模式和生产模式的配置，以及相关插件的安装和配置。在开发模式下，还介绍了Webpack开发服务的依赖模块和相关配置，以及HTML页面的处理。在生产模式下，介绍了代码压缩处理和相关插件的安装和配置。最后，通过核心代码展示了企业级项目的编译配置流程，强调了配置复用和隔离的重要性。总的来说，本文内容丰富，适合想要深入了解Webpack构建Vue 3项目的读者。
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
全部留言(16)
- 最新
- 精选
- Geek_b640fe‘NODE_ENV’ 不是内部或外部命令，也不是可运行的程序或批处理文件 windows 环境必须安装 cross-env 模块，并在启动命令前安装 npm i -D cross-env "scripts": { "dev": "cross-env NODE_ENV=development webpack serve -c ./webpack.config.js", "build": "cross-env NODE_ENV=production webpack -c ./webpack.config.js" },
作者回复: 点赞
2022-12-07归属地：中国香港7 - 风太大太大Webpack 3 4 5每个版本差异还挺大的，plugin变更，语法变更，对缓存的使用程度，打包构建加速那个版本的方案都不同，版本越高越方便
作者回复: 点赞
2022-11-23归属地：江苏4 
ZR-rd老师，大厂一般都是使用 CDN 来导入 Vue 等第三方库的吗？为什么不是直接打包到 bundle 中呢？这样有什么优缺点呢？作者回复: 通过external和cdn来导入库可以利用缓存，显著减少页面需要加载的内容
2022-12-01归属地：江苏3
丫头webpack.default.js webpack.dev.js webpack.prod.js 不同环境独立文件，会不会更清晰些作者回复: 您好，你的这个文件思路也是常见的方案，能清晰地隔离出不同环境的编译脚本。
2022-12-05归属地：广东32
健牌哥.dev配置的devServer把static.directory修改成 path.join(__dirname, 'public')，本地node_modules的vue运行时文件就加载不成功了，index.html已放在public文件夹里。请问下这个怎么解决呢？作者回复: 您好，static.directory 指的是devServer的静态资源服务，不会自动编译node_modules里的vue代码。入口的index.html文件尽量不要放在静态文件里中使用。
2023-01-16归属地：广东- 定宇想問一下，如果在webpack輸出檔案有加hash值的話 ex: ``` output: { path: path.join(__dirname, '../dist'), publicPath: '/', filename: '[name].[hash].js', } ``` 在HtmlWebpackPlugin那邊要怎麼設置呢？
作者回复: 您好，HtmlWebpackPlugin 会根据hash值变化的，具体可以参考官方文章 https://webpack.js.org/plugins/html-webpack-plugin/
2022-12-22归属地：中国台湾 
我只想要简单的小幸福👣完整代码地址打不开，能换一个别的地址吗作者回复: 您好，源码是放在GitHub仓库里的，是能打开的，可能你遇到网络问题。
2022-12-20归属地：天津
阿阳在 test: /\.(css|less)$/中，less文件也能直接用css-loader进行处理嘛？不是需要用less-loader进行处理么？作者回复: 您好，首先css-loader和less-loader的功能不一样。 less-loader是将less代码转成css代码，最后将css代码交给css-loader。 css-loader是将css代码进行解析处理，例如解析里面嗯@import依赖等等，最后编译成字符，和输出整体的css内容。
2022-12-04归属地：江苏- 阿阳windows环境下，设置环境变量NODE_ENV需要用到cross-env这个包吧？
作者回复: 您好，你提到的Windows环境的NODE_ENV配置，是需要用到cross-env这个模块来辅助处理的。由于我是用MacOS系统，能直接配置NODE_ENV，所以没用到cross-env。
2022-12-04归属地：江苏2 
派大心还有老师，我想补充一点点，在line 50 if语句前，可以申明config，let config；作者回复: 您好，谢谢提醒，这个是代码小遗漏，的确需要 let 或 var 来声明，要不然容易造成“变量提升”
2022-12-03归属地：北京3