Webpack build Vue project

Time:2021-12-2
Precautions for webpack building Vue project
  1. Download Plugin and loader
  2. Write configuration item
  3. Write component
  4. Introduction component
  5. Import dependency
directory structure

|–>config
|—–>webpack.base.js
|—–>webpack.dev.js
|—–>webpack.pro.js
|–>src
|—–>HTML (htmlwebpackplugin rendered here)
|———>index.html
|—–>router
|———>index.js
|—–>views
|———>Home.vue
|———>Login.vue
|—–>App.vue
|—–>main.js
|–>node_modules
|–>package.json
Webpack build Vue project
Dependent package all:
package.json

{
  "scripts": {
    "dev": "webpack-dev-server  --config config/webpack.dev.js"
  },
  "devDependencies": {
    "HTML webpack plugin": "^ 4.2.0", // mixed with HTML
    "vue": "^2.6.11",
    "vue-loader": "^15.9.1",
    "vue-router": "^3.1.6",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}

Webpack config configuration:

The reason for configuring this is, of course, that we have toSeparate development environmentandSpecific corresponding post optimization, and write more instructions in the script in package.json

We need to introducewebpack-mergeThis package allows us to configure multiple webpack dependencies

webpack.base.js

//For public environment configuration
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "js/bundle.js",
    // publicPath: "./",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./src/html/index.html" }),
    new VueLoaderPlugin(),
  ],
};

webpack.dev.js

//For development environment configuration
const base = require("./webpack.base.js"); // Non SRC node modules
const merge = require("webpack-merge");
/* const path = require("path"); */
module.exports = merge(base, {
  mode: "development",
  devServer: {
    /*     contentBase: path.join(__dirname, "../dist"),
    compress: true, */
    port: 3000,
    open: true,
    hot: true,
  },
});

webpack.pro.js

//For production environment configuration
const base = require("./webpack.base.js");
const merge = require("webpack-merge");
module.exports = merge(base, {
  mode: "production",
});

So far, we have installed the package and configured the webpack

Copy and download dependent packagesnpm|yarn|cnpm install|add xxx xxx -D:

Webpack processing Vue xxx

vue vue-router vue-template-compiler vue-loader

Webpack configuration items and development xxx

webpack webpack-cli webpack-dev-server webpack-merge

HTML blending template xxx

html-webpack-plugin

Write components and Vue router

viewsCorresponding components ———————– these two changes are relatively large
Home.vue

<template>
  < div id = "home" > this is the home component < / div >
</template>
<script>
export default {};
</script>
<style></style>

Login.vue

<template>
  <div id="Login">
    This is the login component
  </div>
</template>
<script>
export default {};
</script>
<style></style>
Router routing configuration ——————– these two changes are relatively large
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";

Vue.use(VueRouter);
const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/login",
      component: Login,
    },
  ],
});
export default router;
Entry file

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
new Vue({
  el: "#app",
  render: (h) => h(App),
  router,
});