持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
在学习了webpack后一直都没有实践的机会，最多的时候也就是简简单单的配置一下devServer,自己学vue也有一段时间了，正好借此机会配置一下简易版的vue cli。
1. 初始化我们的整个项目
由于用的是webpack的项目工具，所以我们直接在终端输入npm init然后进行相关的配置就行，如果想直接使用默认的配置，那么可以直接运行npm init -y即可，这样我们的目录中就会生产一个package.js的包管理。
2. 依赖安装
回想一下我们在使用vue-cli的时候要用到依赖主要就有以下这些
1.运行时依赖 npm install xxx-xxx --save
- vue 既然都是vue的cli这个肯定是不能没有的。
- axios 这个是为我们发送请求进行前后端交互用的。
- 可能还会有一些第三方的UI库。
2.开发时依赖 npm install xxx-xxx --save -d
- vue-loader 加载vue，将vue解析为js。
- vue-template-compiler vue的模板编译。
- scass scass-loader css-loader style-loader 这里就是一些css预处理器，根据自己的需要进行安装配置就行。
- babel @babel/core @babel/preset-env js在我们的项目中也是必不可少的，那么设计到一些es6需要转化为我们的es5语法等。
- webpack webpack-cli 这个就是webpack的相关依赖让我们可以以类似npm run serve的指令运行项目。
- webpack-dev-server 这个就是开发者服务器，想一下我们的运行项目的时候的开发者服务器就是这个东西。
3. 相关文件目录的构建
熟悉脚手架开发的应该对下面的文件目录结构都比较熟悉。
- dist文件是我们最后要发布的文件夹，里面的index.html就是最终要运行的页面，webpack通过对我们所写的各种文件进行打包成 .js文件,在HTML文件中引入运行得到最终的页面。
- src文件夹是我们写项目源代码的地方，App是我们程序的根，main.js是程序的入口。
从上面的分析我们可以很快的写出index.html的内容：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="root"></div>
<script src="boundle.js"></script>
</body>
</html>
由于只是简单的测试，所以我们的App.vue也进行简单的书写就好
<template>
<div>test</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
main.js要负责联系我们的App.vue和我们的index.html。vue3.0的写法如下：
import {createApp} from "vue";
import App from "./App.vue";
createApp(App).mount("#root");
4. 相关webpack的配置
对webpack进行配置，使得其能正确的解析各种文件，进行打包运行。
1.在项目的根目录新建webpack.config.js文件用来配置。
2.webpack是基于node的所以使用的模块化是commonjs,所以配置项是通过module.exports来进行暴露的。
3.webpage的配置主要就5个模块entry:程序的入口，output:最终输出的位置，loader:各种loader的配置，plugin：插件的相关配置，mode:不同模式下的配置。
4.entry配置：前面的分析已经告诉我们了，我们程序的入口就是main.js,这里我们就直接写相对路径就可以"./src/main.js"。
5.output配置：输出的最终位置是在我们的dist文件夹中，且输出的文件名字应该和我们在index.html中引入的文件名一致，这里我们就叫boundle.js。
6.loader配置：loader在webpack的配置项叫module,通过rules数组来进行配置，我们主要配置以下的几个点：①对 .vue文件进行解析，这里用的就是vue-loader,② .m?js文件，mjs是模块的js,对于这些js文件我们要用babel进行解析，用到babel-loader其中options是要预设值为我们的@babel/preset-loader
7.plugins配置：这里是对vue加载插件的配置只要将VueLoaderPlugin的实例传入即可。
8.devServe配置：我们还需要配置响应开启后的web服务器，就是在这个配置项中进行操作。
最终配置完的webpack.config.js如下：
const { resolve } = require("path");
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
entry: "./src/main.js",
output: {
filename: "boundle.js"
},
module: {
rules: [
{ test: /\.vue$/, use: "vue-loader" },
{
test: /\.s[ca]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.m?js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin()
],
devServer: {
static: {
directory: resolve(__dirname, 'dist'),
},
compress: true,
port: 9000,
},
};
