前言

平时我总是用 vue/cli 直接创建 vue 项目，很少去了解内部构建流程，现在我们从 0 开始，手动构建一个简易 vue3 项目，说干就干！走起~

步骤

• 新建文件夹，并 npm 初始化

  npm init -y
  

• 局部安装 webpack 和 webpack-cli

  npm install webpack webpack-cli -D
  

  我的版本如下图

  

• 根目录下新建 src 目录和 index.html ,在 src 目录下新建 main.js 和 App.vue 文件，目录结构如图

  

• 安装 vue3

  npm install vue -save
  npm i @vue/compiler-sfc
  

  若安装的是vue2,可使用 npm install vue@next -save 安装 vue3

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

  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') 
  

• 安装 HtmlWebpackPlugin

  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等。文章还有很多细节我没有过多叙述，因为我觉得官网上的更全更清晰，需要的可以在这移步官网。