AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

webpack5 + vue3 从零配置项目

2023-04-20 658
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： webpack5 + vue3 从零配置项目

image.png


前言

虽然在实际项目当中很少会从 0 到 1 配置一个项目，毕竟很多重复工作是没有必要的，脚手架将这些重复性的工作进行了整合，方便开发者使用。也正因如此，导致部分开发者过于依赖脚手架，却不清楚其内部的实现流程，因此通过从 0 到 1 去配置和搭建项目可以更好的理解开发中使用的脚手架都帮我们做了哪些事情。

准备工作

创建目录结构

这里直接使用 npm init vite@latest 命令生成 vue3 最新的目录结构：

image.png

当然，需要对这个目录进行一些调整：

  • 将 vite.config.js 换成 webpack.config.js：因为我们要基于 webpack5 对项目进行编译构建
  • 初始化新的 package.json：原本的 package.json 依赖了一些我们不需要的内容，因此直接删除重新初始化
  • 去除 index.html 中的 <script type="module" src="/src/main.js"></script>，因为这是 vite 需要的，但 webpack 并不需要

下面是调整后的目录结构：

image.png

安装基本依赖

下面列出了需要的一些基本依赖，其他的依赖在后面需要的时候在进行安装：

  • npm install vue@next
  • npm install webpack webpack-cli webpack-dev-server -D

对 webpack 进行基本配置

// webpack.config.js
const path = require('path')
module.exports = {
    entry: {
        path: './src/main.js'
    },
    output: {
        filename: 'assets/js/[name].[contenthash:6].js',
        path: path.resolve(__dirname, './dist')
    }
}
复制代码

在 package.json 中创建脚本

// package.json
  "scripts": {
    "dev": "webpack server --mode=development",
    "build": "webpack --mode=production"
  }
复制代码

针对不同文件类型进行配置 webpack

启动项目

完后以上准备工作之后，我们就可以通过 npm run dev 命令来启动项目，但是你会发现这样的错误：

image.png

其实就是 webpack 不能认识 .vue 文件，它需要我们提供一个 loader 对其进行处理，这个 loader 就是官方文档中提到的：

image.png

其中 @vitejs/plugin-vue 这个是 vite 才需要的，因此我们只需要 vue-loader@next、@vue/compiler-sfc

注意：vue-loader 默认是处理 vue2 的，这里使用的是 vue3，所以要安装  vue-loader@next

在 webpack中处理 .vue 文件

首先通过 npm install vue-loader@next @vue/compiler-sfc -D 安装需要的依赖，然后在 webpack.config.js 中进行配置：

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
   entry: {
       path: './src/main.js'
   },
   module: {
       rules: [
           {
               test: /\.vue$/,
               use: 'vue-loader'
           }
       ]
   },
   output: {
       filename: 'assets/js/[name].[contenthash:6].js',
       path: path.resolve(__dirname, './dist')
   },
   plugins: [
     new VueLoaderPlugin(),
   ]
}
复制代码

配置完成之后，我们在通过 npm run dev 启动项目，不出意外的你将得到下面的错误：

显然 webpack 也不认识 <style></style> 中样式相关的内容，这一点大家都知道，那肯定是要使用 style-loader 和 css-loader

在 webpack中处理 <style></style> 样式相关的内容

首先通过 npm install style-loader css-loader -D 安装需要的依赖，然后在 webpack.config.js 中进行配置：

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin(),
  ]
}
复制代码

配置完成之后，又一次通过 npm run dev 启动项目，不出意外的你将又一次得到下面的错误：

image.png

意思就是说 webpack 仍然无法识别图片类型的文件，如：.(png|jpg|jpeg|gif) 等，那么到了这里相信你灵光一闪，想到了需要使用 file-loader/url-loader，但在这我们不需要配置这两个 loader，因为我们使用的是 webpack5 ，是时候使用其中 资源模块(asset module) 的模块类型了.

配置 webpack 资源模块

废话不多说，直接上官方文档使用说明：

image.png

下面就是配置后的 webpack.config.js 内容：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]'
        }
      }
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin()
  ]
}
复制代码

这时候在通过 npm run dev 启动项目，发现终于没有报错了：

image.png

此时访问页面内容：

image.png

是不是会觉得 image.png，别慌问题不大，其实就是没有给 webpack 打包后的 js 代码指定模板.

为 webpack 指定模板

熟悉 webpack 的你肯定猜到要是用 html-webpack-plugin 插件，首先通过 npm install html-webpack-plugin -D 安装依赖，然后配置 webpack.config.js 文件：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]'
        }
      }
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
          template: path.resolve(__dirname, './index.html')
      })
  ]
}
复制代码

此时，在重新通过 npm run dev 启动项目并访问页面:

至此，终于成功配置了一个简单的基于 vue3 和 webpack5 的项目.

优化配置文件

通过 F12 打开页面控制台，你会看到这么一段警告信息：

image.png

其中 __VUE_OPTIONS_API__ 和 __VUE_PROD_DEVTOOLS__ 对应的值都是 Boolean 类型，分别代表的是：

  • __VUE_OPTIONS_API__：表示是否支持 options api 的写法，默认是 true
  • __VUE_PROD_DEVTOOLS__：表示生产包是否要继续支持 devtools 插件，默认是 false

即便它们都有默认值，可以不进行设置，但是 Vue 希望我们自己去设置这两个配置，毕竟如果完全拥抱 Vue3 的话，写法上没有必要在使用 options api 的格式，这样在打包的时候，包的体量上也会有所减少.

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]',
        },
      },
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
    }),
    new DefinePlugin({
      __VUE_PROD_DEVTOOLS__: false,
      __VUE_OPTIONS_API__: false,
    }),
  ],
}
复制代码

最后

首先通过 npm run build 查看打包后生成为目录结构：

image.png

目前存在的不足：

  • js 文件没有进行抽取，现在所有的 js 内容都会默认打包到 main.hash.js 中
  • css 样式相关的内容没有进行抽取，现在的样式全部以 <style></style> 标签的形式插入在 html 文件中
  • 没有对 css 进行兼容处理
  • 没有对 js 进行兼容处理
  • 没有很好的区分各个环境，如：开发、测试、生产
  • ...

当然也有对应的处理方式：

  • 通过 webpack 的 optimization 选项配置，抽离对应的 js
  • 通过 mini-css-extract-plugin 插件来抽离对应的 css
  • 通过 postcss 对 css 进行处理
  • 通过 babel 对 js 进行处理
  • 针对公共配置部分进行抽取，或者通过环境变量去合成最终的配置项
  • ···

以上的这些就不在一一进行配置，在需要时在进行相应配置即可.

至此，我们成功的将基于 vite + vue3 项目转换成了基于 webpack5 + vue3 的项目.


文章标签：
JavaScript
前端开发
API
开发者
关键词：
Webpack配置
VUE.js配置
Webpack项目
VUE.js项目
vue项目
熊的猫
目录
相关文章
dufadayang
|
6天前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离？
通过以上方法，可以有效地配置Webpack进行代码分离，根据项目的具体需求和场景选择合适的方式，能够显著提高应用的性能和用户体验。在实际应用中，还可以结合其他优化技术，进一步优化Webpack的打包结果和应用的加载速度。
dufadayang
20 5
dufadayang
|
6天前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分，实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置，以满足不同的构建和优化要求。
dufadayang
17 2
我是快乐的嘟嘟
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
54 26
那年春天
|
6天前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些？
通过以上常见方法，可以根据项目的具体需求和场景，灵活地配置Webpack进行代码分离，从而提高应用的性能和加载速度，优化用户体验。
那年春天
14 3
土木林森
|
12天前
|
缓存 前端开发 JavaScript
前端性能优化：Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中，Webpack和Babel是不可或缺的工具，分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略，包括Webpack的代码压缩、缓存优化和代码分割，以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化，可以显著提升应用的加载速度和运行效率，从而改善用户体验。
土木林森
32 6
土木林森
|
14天前
|
缓存 监控 前端开发
前端工程化：Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势，通过将前端代码视为工程来管理，提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化，并提供了具体示例代码。Webpack擅长模块化打包和资源管理，而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势，需根据项目需求进行选择和优化。
土木林森
46 7
大树营养快线
|
16天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例，以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法，能够更好地利用这一功能，提升项目的开发效率和性能表现。同时，要不断关注 Webpack 及相关技术的发展动态，以便及时掌握最新的热更新技术和最佳实践。
大树营养快线
32 8
土木林森
|
13天前
|
缓存 前端开发 JavaScript
前端工程化：Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中，构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具，介绍了它们的特点和适用场景，并提供了配置优化的最佳实践。Webpack适合大型模块化项目，Gulp则适用于快速自动化构建流程。通过合理的配置优化，可以显著提升构建效率和性能。
土木林森
26 2
龙大吉
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
龙大吉
163 4
大树营养快线
|
16天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
22 2

热门文章

最新文章

  • 1
    Webpack构建library时的踩坑经历
  • 2
    webpack window 使用sass来编译css样式
  • 3
    2.2.3 使用webpack loader
  • 4
    wp2vite的妙用，让webpack项目支持vite
  • 5
    你真的理解 Webpack？请回答下列问题
  • 6
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 7
    webpack指南-webpack介绍-代码分割 - CSS
  • 8
    webpack 笔记
  • 9
    webpack原理篇（六十三）：插件基本结构介绍
  • 10
    Webpack5 系列（二）：静态资源的处理3
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 3
    在Vue中，子组件向父组件传递数据
    73
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    96
  • 5
    【vue3】vue3中路由hash与History的设置
    210
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1105
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    470
  • 8
    【vue】 vue2 监听滚动条滚动事件
    143
  • 9
    【天地图】vue 天地图 T is not defined
    173
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    608

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 前端自动化构建工具 Webpack
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    阿里云OSS设置跨域访问