Webpack搭建Vue項目

webpack搭建vue項目注意事項

1. 下載plugin 和 loader
2. 編寫配置項
3. 編寫組件
4. 引入組件
5. 引入依賴便可

目錄結構

|-->config
|----->webpack.base.js
|----->webpack.dev.js
|----->webpack.pro.js
|-->src
|----->html (htmlwebpackplugin 以這裏渲染)
|--------->index.html
|----->router
|--------->index.js
|----->views
|--------->Home.vue
|--------->Login.vue
|----->App.vue
|----->main.js
|-->node_modules
|-->package.json

依賴包ALL:
package.json

{
  "scripts": {
    "dev": "webpack-dev-server  --config config/webpack.dev.js"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.2.0", //混入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配置:

配置這個的緣由固然是讓咱們得已分開開發環境和具體的對應後期優化,以及在package.json裏的script寫更多指令

咱們須要引入 webpack-merge這個包以便咱們在配置多個webpack依賴

webpack.base.js

//用於公用環境配置
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

//用於開發環境配置
const base = require("./webpack.base.js"); //非src 旨在node模塊
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

//用於生產環境配置
const base = require("./webpack.base.js");
const merge = require("webpack-merge");
module.exports = merge(base, {
  mode: "production",
});

截止到目前,咱們算是已經下好了包,配置好了webpack

可複製下載依賴包npm|yarn|cnpm install|add xxx xxx -D:

webpack處理vue xxx

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

webpack配置項和開發 xxx

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

html混入模板 xxx

html-webpack-plugin

編寫組件 和 vue-router

views 對應組件 ------------------這兩個更改比較大
Home.vue

<template>
  <div id="Home">這是Home組件</div>
</template>
<script>
export default {};
</script>
<style></style>

Login.vue

<template>
  <div id="Login">
    這是Login組件
  </div>
</template>
<script>
export default {};
</script>
<style></style>

router 路由配置 -------------------這兩個更改比較大

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;

入口文件

main.js

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