使用 Webpack5 配置 Vue3 基础开发环境

前年年底一时兴起，我开始尝试 React。从《手动搭建基于 Webpack 的 React 项目开发环境》这篇文章起，我逐渐把手头的个人项目都迁移到了 React。一年多过去了，我决定回到 Vue。

回到 Vue 并不代表 React 不好，只是对我来说，它的 Hook 组件在使用时需要注意的方面太多，让我在开发稍微复杂点的项目时缺乏安全感。但要完全弄懂它的 Hook 组件逻辑又过于劳心劳力。我无意成为 React 专家，只是想找一个顺手的前端组件工具库解决自己的业务问题，所以从易用性考虑，我决定还是回到 Vue。

目前最新的 Vue 版本是 Vue3，看官方文档，推荐的打包工具是 Vite。尝试了一下，的确是方便快捷。配置简单，打包速度快，还支持自动刷新浏览器页面……，但貌似不太适合我的使用场景。比如它强制使用 localhost 本地域名访问，而我是给每个项目都分配了一个开发域名。另外和前后端一体的项目整合流程貌似也有点麻烦。在体验了它的代理配置方式依然无法正常集成到现有项目后，我决定还是回到 Webpack。虽然它的打包速度一直被诟病，但以我的项目体量，影响不大。

Vue3 官方文档只提供了 vite 的安装说明，使用 Webpack 只能自己摸索。还好有其他人分享的经验，节省了我不少时间。以下是搭建过程，开始之前请先安装好最新的 Node.js，确保 npm 命令能正常使用。

mkdir demo
cd demo

安装 Webpack：

npm install -D webpack webpack-cli

安装 Vue 和相关插件:

npm install vue@next vue-loader@next @vue/compiler-sfc

安装 CSS 插件，以支持 Vue 组件文件中的 <style> 样式标签：

npm install -D style-loader css-loader

通过以上步骤，基本实现了支撑 Vue 组件打包的基础依赖环境，接下来创建 Webpack 的打包配置文件: webpack.config.js，配置代码如下：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry: {
        path: './main.js',
    },
    output: {
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader',
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
}

最后配置打包命令。在 package.json 文件中添加以下代码:

"scripts": {
    "dev": "webpack --mode=development --watch",
    "prod": "webpack --mode=production"
}

这样就可以执行 npm run dev 完成开发时的打包文件输出，执行 npm run prod 完成线上打包的输出。以上就完成了一个最基础的 Vue 开发环境。后续只要根据需求补充依赖组件并配置 webpack.config.js 文件即可。

使用 Webpack5 配置 Vue3 基础开发环境

上一篇

下一篇