在webpack4.0中使用vue的配置过程

前端开发者使用vuejs开发项目时,是无法直接通过webpack打包的,下面我们来学习一下如何在webpack环境中集成vuejs。

1.打包vue代码

1.做项目前,先使用npm init 生成package.json文件:

npm init

然后一直按“回车键”,默认配置生成package.json文件。

2.我们是在webpack中配置vue,则需先在项目目录下安装好webpack:

npm install webpack webpack-cli --save-dev

3.我们希望在项目中使用vuejs,那么必然需要对其有依赖,所以需要进行安装vue。
在项目目录下运行下面命令:

npm install vue --save

这是vue会下载在node_modules文件中。

4.这时可以在webpack中使用es6语法导入在用到vue语法的文件导入vue:

import Vue from "vue";

5.下面写个简单实例看是否能打包成功:

实例目录:
在这里插入图片描述
index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack中配置vue</title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

main.js:

import Vue from "vue";

const app = new Vue({
  el: "#app",
  data: {
    message: "哈哈哈,webpack中配置vue",
  },
});

webpack.config.js:

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

执行打包命令:

npx webpack

在这里插入图片描述
能成功打包,在浏览器是否能成功显示信息:在这里插入图片描述
很显然报错了,这是因为我们还没有在webpack配置文件中更改一个配置:

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

我们在配置文件中多添加了resolve属性。

再次查看是否能正常显示:
在这里插入图片描述
ok,正常显示,这样就可以正常使用vue了,但是当要打包以.vue结尾的文件时还需进一步配置。

2. 打包.vue结尾文件

执行下面命令:

npm install vue-loader@15.7.0 vue-template-compiler --save-dev

npm install css-loader style-loader --save-dev

添加一个App.vue结尾的文件:

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>
<script>
export default {
  name: "App",
  data: function () {
    return {
      message: "哈哈哈,webpack中配置vue",
    };
  },
};
</script>
<style scoped>
h2 {
  color: blueviolet;
}
</style>

修改main.js文件:(在这里引入App.vue文件,建立依赖关系,一起打包)

import Vue from "vue";
import App from "./src/vue/App.vue";
new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App,
  },
});

修改配置文件代码:

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  mode: "development",
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
  		new VueLoaderPlugin()//必须添加
  ],

  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

上面命令声明了 vue-loader需是15.7.0以上的版本,否则找不到VueLoaderPlugin。这里也要配置css-loader、style-loader是因为.vue结尾文件中也有html、css格式内容

执行打包命令:
在这里插入图片描述

查看是否运行成功:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页