【vue3+webpack5】基于vue3+webpack5配置逐步搭建前端项目

基础篇

1.创建vue项目

npm init vue@latest

2. 删除package.json中不用的依赖

官方创建的项目一般没有问题，不放心的可以根据提示命令，启动服务
2.1 删除devDependencies中以下的内容

{
   
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "vite": "^4.3.5"
}

2.2 删除index.html 中的引入

<script type="module" src="/src/main.js">script>

3. 安装 webpack 相关依赖

npm install webpack webpack-cli webpack-dev-server -D

完成后package.json 的devDependencies中会增加以下内容

{
   
    "webpack": "^5.85.1",
    "webpack-cli": "^5.1.3",
    "webpack-dev-server": "^4.15.0"
}

4. 创建webpack配置文件，并写入代码

// build/webpack.base.conf.js
const path = require("path");
module.exports = {
   
  entry: path.resolve(__dirname, "../src/main.js"), // 入口文件，打包从这个文件开始
  output: {
   
  	publicPath: '/',
    path: path.resolve(__dirname, "../dist"), // 出口文件，打包生成的文件放置到这个文件夹下
    filename: "./js/[name].[chunkhash.6].js" //打包成的文件名。name取的原始文件名，chunkhash生成哈希值，这样每次打包出来不一样，避免浏览器缓存读取旧文件。
  },
  mode: "development"  //开发模式
}; 

5. 修改package.json的script

"scripts": {
   
    "dev": "webpack --config ./build/webpack.base.conf.js  --progress --color -w --host 0.0.0.0"
 }
//--progress： 启用在构建过程中打印编译进度
//--color： 启用控制台颜色
//--watch或-w： 监听文件变化 
//--host 0.0.0.0 通过ip可以访问前端服务

6. 配置本地开发服务

6.1 在webpack.base.conf.js中添加devServer配置

 devServer: {
   
    hot: true, //模块的热替换
    open: true, // 编译结束后自动打开浏览器
    port: 8080, // 设置本地端口号
    host: "localhost" //设置本地url
  }

6.2 修改package.json文件中的script命令配置

"scripts": {
   
    "dev": "webpack server --config ./build/webpack.base.conf.js  --progress --color --host 0.0.0.0"
 }

7. 配置html插件

7.1 安装依赖

npm install html-webpack-plugin -D 

7.2 在 webpack.base.conf.js 中引入依赖，并配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   
  // ...其他配置
   plugins: [
      new HtmlWebpackPlugin({
   
        template: "./public/index.html", //用来做模板的html的文件路径(从项目根目录开始)
        filename: "index.html", //生成的html的名字
        title:'vue3+webpack5',//这个就对应上文的title
        inject: "body" //打包出来的那个js文件，放置在生成的body标签内
      })
    ]
} 

7.3 根据插件配置, 将index.html移入public文件夹中，并将title修改为

<%= htmlWebpackPlugin.options.title %>

8. 配置vue

8.1 安装依赖

npm i vue-loader @vue/compiler-sfc -D

8.2 在 webpack.base.conf.js 中引入依赖，并配置

const {
   VueLoaderPlugin} = require("vue-loader/dist/index")
module.exports = {
   
 // ...其他配置
	module: {
   
		rules: [
			{
   
				test: /\.vue$/,
				loader: "vue-loader"
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
} 

9. 配置babel ，解决浏览器不支持ES6

9.1 安装依赖

// 将js代码转换成浏览器能识别的代码
npm i babel-loader @babel/core @babel/preset-env -D

// babel/runtime 可以通过引用babel/runtime中的方法补全 当前运行环境中并没有实现的一些方法
// babel/plugin-transform-runtime 自动引入babel/runtime中的方法，不需手动引入
npm install @babel/runtime @babel/plugin-transform-runtime -D

9.2 修改 webpack.base.conf.js 中的配置

module.exports = {
   
    // ...其他配置
    module: {
   
        rules: [
            {
   
                test: /\.(js)$/,
                use: {
   
                  lo