Webpack build Vue project

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

|—–>HTML (htmlwebpackplugin rendered here)
Webpack build Vue project
Dependent package all:

  "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


//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(),


//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,


//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


Write components and Vue router

viewsCorresponding components ———————– these two changes are relatively large

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


  <div id="Login">
    This is the login component
export default {};
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";

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


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