Vue3+Webpack5手动搭建环境

avatar
Lete乐特
2k
9min

刚学会用Vue框架，由于我有点前端基础，在没有接触Vue等框架的之前，都是纯手写的html静态页面
但我当时已经接触了很多关于Node的很多用法，以及了解npm、webpack等(全是拜Hexo所赐)
所有在学习Vue的时候不是用<script></script>标签引入的，直接就使用Vue CLI构建，直接学习
学习的时候一直用的是Vue CLI构建构建项目，在build时我不想让Vue CLI打包成好几个js文件，当时也上网查了很多资料
视乎Vue CLI并不允许这样做，但是也有很多大神提供了很多办法，奈何我看不懂，只能手动搭建vue+webpack环境

创建项目目录D:\Vue3_Webpack5

COPY 
1
2
3
cd ./Vue3_Webpack5 # 进入项目目录
npm init -y # 初始化项目
npm install webpack webpack-cli --save-dev # 安装webpack 以及webpack-cli

在根目录创建webpack.config.js–webpack.dev.config.js–template/index.html–src/index.js如下图
项目基本目录

我个人不喜欢使用webpack的配置文件合并功能，我更喜欢新建指定文件让webpack去执行
虽然这种办法会出现很多冗余代码，但是这样能更清晰明了的读懂代码

修改webpack.config.js和webpack.dev.config.js

COPY 
1
2
3
4
5
6
7
8
9
10
// webpack.config.js
const path = require('path')
module.exports = {
  mode: "production", // 环境模式
  entry: path.join(__dirname, './src/index.js'), // 打包入口
  output: {
    path: path.join(__dirname, 'dist'), // 打包出口(输出目录)
    filename: '[name].js' // 打包完的静态资源文件名
  }
}
COPY 
1
2
3
4
5
6
7
8
9
10
// webpack.dev.config.js
const path = require('path')
module.exports = {
    mode: "development", // 环境模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口
    output: {
        path: path.join(__dirname, 'dist'), // 打包出口(输出目录)
        filename: '[name].js' // 打包完的静态资源文件名
    }
}

修改package.json的script

COPY 
1
2
3
4
"scripts": {
  "bulid": "webpack --config ./webpack.config.js",
  "dev": "webpack serve --config ./webpack.dev.config.js"
},

安装html-webpack-plugin webpack-dev-server插件，就不用每次写完代码后要重新打包运行了
执行npm install html-webpack-plugin webpack-dev-server -D

由于html-webpack-plugin插件在默认情况下会自动注入打包好的js
并且添加的位置是</head>之前，拥有defer属性
可是我想让js导入的位置是</body>之前我该怎么做？
给webpack里的new HtmlWebpackPlugin()添加inject: false

修改webpack.dev.config.js和webpack.config.js

COPY 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// webpack.dev.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development", // 环境模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口
    output: {
        path: path.join(__dirname, 'dist'), // 打包出口(输出目录)
        filename: '[name].js' // 打包完的静态资源文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './template/index.html'), // 我们要使用的 html 模板地址
            filename: 'index.html', // 打包后输出的文件名
            title: '手动建搭 Vue 开发环境', // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量
            inject: false // 禁止插件自动注入js
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, './dist'),
        port: 1104,
        publicPath: '/',
        hot: true, // 启用热重载
        open: true, // 自动打开浏览器
        compress: true // 压缩
    }
}

修改template/index.html

COPY 
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="app"></div>
    <script src="./main.js"></script>
</body>
</html>

安装Vue3 npm install vue@next --save注意必须使用@next，如果不使用，则安装的是vue2的最新版本而不是vue3

安装完成后创建/scr/App.vue

COPY 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="lete">
    <span>这里是乐特博客：</span>
    <a :href="blog" target="_blank">{{ blog }}</a>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      blog: "https://blog.lete114.top",
    };
  },
};
</script>

<style scoped>
.lete {
  color: #00c4b6;
}
</style>

修改src/index.js

COPY 
1
2
3
4
5
6
7
// index.js

import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App.vue' // 引入 APP 页面组建

const app = createApp(App) // 通过 createApp 初始化 app
app.mount('#app') // 挂载页面上的#app

到这里先别急着运行代码，我们还得安装load

需要安装两个插件

  1. vue-loader
    它是基于 webpack 的一个的 loader 插件，解析和转换 .vue 文件
  2. @vue/compiler-sfc
    在这里提醒一下，我之前搭建的时候看的是vue-loader官网的教程，里面说要安装vue-template-compiler插件，我安装后运行报错，我以为我哪个步骤出现了问题，排查了好几遍都没发现啥毛病，最后删了重来还是报错(崩溃，浪费了好多时间)，最后我翻开了之前用Vue CLI构建的项目，发现Vue3用的是@vue/compiler-sfc而不是官网说的vue-template-compiler，害我折腾了好久，更气人的是，官网并没有说明是vue2的教程(可能官方推荐使用vue3的时候用cli构建吧)

安装插件npm install vue-loader@next @vue/compiler-sfc -D

安装vue3要用@next安装load当然也要，否则安装的就是vue2的load了

慢着，还需要两个插件style-loader和css-loader处理vue的css样式
npm install style-loader css-loader -D

修改webpack.dev.config.js和webpack.config.js

COPY 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// webpack.dev.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: "development", // 环境模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口
    output: {
        path: path.join(__dirname, 'dist'), // 打包出口(输出目录)
        filename: '[name].js' // 打包完的静态资源文件名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './template/index.html'), // 我们要使用的 html 模板地址
            filename: 'index.html', // 打包后输出的文件名
            title: '手动建搭 Vue 开发环境', // index.html 模板内，通过 <%= htmlWebpackPlugin.options.title %> 拿到的变量
            inject: false // 禁止插件自动注入js
        }),
        new VueLoaderPlugin()// 添加 VueLoaderPlugin 插件
    ],
    devServer: {
        contentBase: path.join(__dirname, './dist'),
        port: 1104,
        publicPath: '/',
        hot: true, // 启用热重载
        open: true, // 自动打开浏览器
        compress: true // 压缩
    }
}

安装clean-webpack-plugin插件，每次build代码的时候都会清除dist目录，避免上一次build遗留下来的文件

修改webpack.config.js

COPY 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    mode: "production", // 环境模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口
    output: {
        path: path.join(__dirname, 'dist'), // 打包出口(输出目录)
        filename: '[name].js' // 打包完的静态资源文件名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ],
    },
    plugins: [
        new VueLoaderPlugin(),// 添加 VueLoaderPlugin 插件
        new CleanWebpackPlugin()
    ]
}

安装babel插件让我们写的代码在build的时候兼容指定浏览器的版本号
npm install @babel/core @babel/preset-env babel-loader
在根目录下新建babel.config.js

COPY 
1
2
3
4
5
6
7
8
9
module.exports = {
  presets: [
      ["@babel/preset-env", {
          "targets": {
              "browsers": ["last 2 versions"] // 最近 2 个版本的浏览器
          }
      }]
  ]
}

在webpack.config.js中的module新增

COPY 
1
2
3
4
5
6
7
8
9
10
11
module: {
    rules: [
        // 其他插件
        {
            test: /\.js$/,
            exclude: /node_modules/, // 不编译node_modules下的文件
            loader: 'babel-loader'
        },
        // 其他插件
    ]
}

自己要分清楚，有些插件是在开发时需要，而有些在build时不需要，如果你觉得都一样，也可以只写一个webpack.config.js把全部配置全部塞进去

比如clean-webpack-plugin在dev时根本就没啥用，同理在build的时候webpack-dev-server也是没用的，在build的时候也可以不用html-webpack-plugin

Tags:
记录 Node Vue Webpack
Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/vue3-webpack5-env-config.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !