32 webpack+vue使用

最新推荐文章于 2023-03-19 08:46:36 发布

Civitasv

最新推荐文章于 2023-03-19 08:46:36 发布

阅读量165

点赞数

分类专栏： Vue 文章标签： vue babel webpack

本文链接：https://blog.csdn.net/qq_40996400/article/details/104457540

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

webpack+vue

下面结合一个简单的vue实例讲解webpack和vue的结合使用：

1 package.json

{
  "name": "webpack_vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "@babel/preset-env": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "babel-preset-mobx": "^2.0.0",
    "vue": "^2.6.11"
  }
}

2 安装库

npm i

3 web.config.js

const path = require("path");
module.exports = {
  // 编译模式
  mode: "development",
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js" //输出文件的名称
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.js" // 修改vue被导入时的路径
    }
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: "src",
    hot: true
  },
  module: {
    rules: [
      // 第三方模块正则匹配规则
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2s)$/,
        use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        // 不转换node_modules下面的包
        exclude: /node_modules/
      }
    ]
  }
};

4 .babelrc

{
  "presets": ["@babel/preset-env", "mobx"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

5 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack+vue使用</title>
</head>

<body>
    <div id="app">
        <login></login>
    </div>
    <script src="./bundle.js"></script>

</body>

</html>

6 main.js

import Vue from "vue";

var login = {
  template: "<h1>ss</h1>"
};
var vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  components: {
    login
  }
});

文件结构为：

在这里插入图片描述

运行命令npm run server即可显示网页**“ss”**。

下面我们引入一个新的类型的文件：.vue，我们也需要一个新类型的loader。

1 本地安装

npm i vue-loader vue-template-compiler -D

2 修改web.config.js，添加vue-loader

const VueLoaderPlugin = require("vue-loader/lib/plugin");// 这句不要忘记！
module: {
    rules: [
      // 第三方模块正则匹配规则
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2s)$/,
        use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        // 不转换node_modules下面的包
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },
plugins:[
    // 请确保引入这个插件！
    new VueLoaderPlugin()
]

3 login.vue

<template>
  <div>
    <h1>登录组件</h1>
  </div>
</template>

4 main.js

import Vue from "vue";
import login from "./login.vue";

var vm = new Vue({
  el: "#app",
  data: {},
  methods: {},
  render: function(createEle) {
    return createEle(login);
  }
});