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,
});