前言

平时我老是用 vue/cli 直接建立 vue 项目，不多去了解内部构建流程，如今咱们从 0 开始，手动构建一个简易 vue3 项目，说干就干！走起~css

步骤

新建文件夹，并 npm 初始化html
```
npm init -y
复制代码
```
局部安装 webpack 和 webpack-clivue
```
npm install webpack webpack-cli -D
复制代码
```
个人版本以下图node
根目录下新建 src 目录和 index.html ,在 src 目录下新建 main.js 和 App.vue 文件，目录结构如图webpack
安装 vue3es6
```
npm install vue -save
npm i @vue/compiler-sfc
复制代码
```
若安装的是vue2,可以使用 npm install vue@next -save 安装 vue3web

编写 main.js 和 App.vue 文件npm

src/App.vue

<template>
  <div>
      Hello, Welcome to my blog
  <button @click="testFunction">点击我</button>
  </div>
</template>

<script>
  export default {
      
  }
</script>

复制代码

src/main.js

import { createApp } from 'vue' 
import App from './App.vue' 

const app = createApp(App) 
app.mount('#root') 
复制代码

安装 HtmlWebpackPluginjson
```
npm install --save-dev html-webpack-plugin
复制代码
```
这是webpack plugins的内容，该插件能够为生成一个 HTML5 文件，在 body 中使用 script 标签引入你全部 webpack 生成的 bundle.js
更多配置点击这里浏览器
安装 vue-loader
```
npm install vue-loader --save-dev
复制代码
```
loader 也是webpack中重要的概念，默认webpack只会处理js代码，因此当咱们想要去打包其余内容时，让webpack处理其余类型的内容，就要使用相应的loader 更多内容点击这里

配置 webpack ，根目录下新建 webpack.config.js 文件（重点来了)

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  mode: "development", // webpack 使用相应模式的内置优化
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      
      // 应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ["vue-style-loader", {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
            }
          }],
      },

      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"],
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // html 模板地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动搭建 Vue 项目",
    }),
    new VueLoaderPlugin(),
  ],
};
复制代码

entry: 用于 webpack 查找开始构建，这里入口为src下面的main.js文件。因为 vue 为单页应用，因此只有一个入口。可是webpack能够配置多入口，点击查看更多配置
output：规定如何输出打包后的内容。
model：能够对不一样的文件编辑相应的打包规则
plugins：实例化相应的插件，同时能够进行相应设置

编辑运行脚本，这样能够不用敲那么多字。。。（偷懒是惟一辈子产力嘛）
```
package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
},
复制代码
```
运行 npm run build，找到/dist/index.html打开

这个时候还没完成，咱们还须要处理css和 es6+语法(es6+转es5，便于大多数浏览器能识别)，这个时候须要css-loader和babel-loader

安装 css-loader 和 babel-loader

npm install css-loader style-loader babel-loader --save-dev
复制代码

更新webpack.config.js配置

const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");

  module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, "./src/main.js"),
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].js",
      assetModuleFilename: 'images/[hash][ext][query]'
    },

    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: "vue-loader",
        },
        // 应用到普通的 `.css` 文件
        // 以及 `.vue` 文件中的 `<style>` 块
        {
          test: /\.css$/,
          use: ["vue-style-loader", {
              loader: 'css-loader',
              options: {
                // 开启 CSS Modules
                modules: true,
              }
            }],
        },

        {
          test: /\.less$/,
          use: ["vue-style-loader", "css-loader", "less-loader"],
        },

        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },

        {
            test: /\.jpg/,
            type: 'asset/resource'
        }

      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "./index.html"), // html 模板地址
        filename: "index.html", // 打包后输出的文件名
        title: "手动搭建 Vue 项目",
      }),
      new VueLoaderPlugin(),
    ],
  };

复制代码

安装 webpack-dev-server

咱们确定每次都要更改源代码都要打包而后找到输入文件手动打开，这个时候就须要一台服务器来帮咱们完成这些事情，devServer利用 gzips 压缩 dist/ 目录当中的全部内容并提供一个本地服务(serve)

npm i webpack-dev-server -D

复制代码

更新webpack.config.js配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    assetModuleFilename: 'images/[hash][ext][query]'
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      // 应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ["vue-style-loader", {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
            }
          }],
      },

      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"],
      },

      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

      {
          test: /\.jpg/,
          type: 'asset/resource'
      }

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"), // html 模板地址
      filename: "index.html", // 打包后输出的文件名
      title: "手动搭建 Vue 项目",
    }),
    new VueLoaderPlugin(),
  ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

复制代码

如今咱们来测试一下这些功能，更新App.vue文件

<template>
  <div>
      Hello, Welcome to my blog
      <button @click="testFunction">点击我</button>
  </div>
</template>

<script>
export default {
    setup() {
    const testFunction = () => {
      console.log('hi')
    }
    return {
      testFunction
    }
    }
}
</script>

<style scoped>
    div{
        color: red;
    }
</style>

复制代码

更新package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack serve"
  },
复制代码

执行 npm run server (大功告成）

最后

这个只是一个简易的例子，还有不少未配置，如asset module、cache-loader等。文章还有不少细节我没有过多叙述，由于我以为官网上的更全更清晰，须要的能够在这移步官网。

webpack5手动配置简易vue3项目

前言

步骤

最后