前言

平时我总是用 vue/cli 直接创建 vue 项目，正好最近在学习 webpack，为何不直接使用 webpack 手动配置一个 vue 项目呢，说干就干！走起~

步骤

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

本人是大三学生，正在实习（摸鱼）中，欢迎大家相互督促学习
微信：15387941990

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Microsoft Internet Explorer 内存损坏漏洞

Ruby on Rails多个跨站脚本漏洞

Android 构建速度优化 – 3

Android启动优化-类预加载

Sun Java JDK/JRE 权限绕过安全漏洞

【前端实践系列之十】教你封装伴随请求的全局Loading！

webpack5手动配置简易vue3项目

前言

步骤

最后