手动搭建vue3项目，利用webpack5

我是谁谁
389 阅读2分钟
  1. 新建项目目录 mkdir hand-vue3 && cd hand-vue3
  2. // 初始化项目 npm init -y
  3. 当前目录下创建index.html 创建src目录，在src目录下创建App.vue和main.js

如下图目录结构 image.png

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

新建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>

新建main.js

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

const app = createApp(App) 
app.mount('#root')
  1. 局部安装 webpack 和 webpack-cli

npm install webpack webpack-cli -D

  1. 安装vue3

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

  1. 安装 HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

这是webpack plugins的内容，该插件可以为生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle.js

更多配置点击这里

  1. 安装 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: {
    static: {
        directory: path.join(__dirname, 'dist'),
      },
    compress: true,
    port: 9000,
  }
};

更新package.json

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

执行 npm run server (大功告成）

访问localhost:9000

参考：

juejin.cn/post/692116…

juejin.cn/post/697987…

avatar
文章
阅读
粉丝