需要的依赖：

webpack webpack-cli webpack-dev-serve vue-loader vue-template-compiler
sass sass-loader style-loader css-loader babel-loader @babel/preset-env
@babel/core html-webpack-plugin vue(版本2.6.14) vue-router(版本3.5.4)

打包后的结果如下：

那么就开始吧

初始化项目

首先先建立项目，名字叫vue-cli-webpack，之后执行命令 npm init -y 初始化项目然后按照上面的依赖去安装，安装完后在项目根目录建立一个webpack.config.js的文件，在里面写入以下内容:

module.exports = {
    entry : "",
    output : {
        path : "",
        filename : ""
    },
    module : {
        rules : []
    },
    plugins : {},
    devServer : {}
}

之后分别在项目根目录建立dist文件夹，public文件夹，src文件夹。在public文件夹下面定义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><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

在src文件夹下面先定义main.js，代码如下

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
  el: "#app",
  router,
  render(h) {
    return h(App);
  },
});

App.vue代码如下

<template functional>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {},
};
</script>

<style lang="scss" scoped></style>

之后在src文件夹下面定义两个文件夹，分别是pages,router pages下面定义三个vue文件，为About.vue,Home.vue,index.vue。代码分别如下:

/*About.vue*/
<template>
  <div>关于我们</div>
</template>

<script>
export default {
  name: "About",
};
</script>

<style lang="scss" scoped></style>

/*Home.vue*/
<template>
  <div>首页内容</div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style lang="scss" scoped></style>

/*index.vue*/
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Index",
};
</script>

<style lang="scss" scoped></style>

之后在router文件夹下面定义index.js，内容如下:

import Vue from "vue";
import VueRouter from "vue-router";
import index from "../pages/index.vue";
import home from "../pages/Home.vue";
import about from "../pages/About.vue";
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: index,
      children: [
        {
          path: "/home",
          component: home,
        },
        {
          path: "/about",
          component: about,
        },
      ],
    },
  ],
});

export default router;

初始化完成，那么接下来就是完善webpack.config.js的内容了

webpack配置

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js", //入口文件
  output: { //打包后的选项
      path: path.resolve(__dirname, "dist"), //绝对路径 因为路径在每个操作系统里面格式不一样
      filename: "[name].[contenthash:7].js", //文件名
      clean: true, //每次打包后都清除掉之前的打包结果
  }
  //loader 模块 代码转换
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.s[ca]ss$/,
        use: ["style-loader", "css-loader", "scss-loader"],
      },
      {
        test: /\.m?js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: "asset/resource",
      },
    ],
  },
  //插件 增强webpack功能
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      title: "vue-cli-webpack",
      template: "./public/index.html",
    }),
  ],
  devServer: {
    static: "./dist",
    open: true, //立马打开
    host: "local-ip", //设为本机ip地址
    port: 3000, //端口
  },
  devtool: "inline-source-map",
  optimization: {
    runtimeChunk: "single", //打包后的chunk如果没有变动就继续使用
  },
};

路由懒加载

vue-cli的路由懒加载是基于webpack的懒加载实现的所以代码如下

...
const router = new VueRouter({
  routes: [
    {
      path: "/",
      component: () =>
        import(/*webpackChunkName: "index"*/ "../pages/index.vue"),
      children: [
        {
          path: "/home",
          component: () =>
            import(/*webpackChunkName: "home"*/ "../pages/Home.vue"),
        },
        {
          path: "/about",
          component: () =>
            import(/*webpackChunkName: "about"*/ "../pages/About.vue"),
        },
      ],
    },
  ],
});

这样子打包后的文件名字就能分辨出来是哪个模块的

完

浅析webpack5实现vue-cli（vue2）

需要的依赖：

打包后的结果如下：

初始化项目

webpack配置

路由懒加载