webpack 之使用vue配置

注意点:vue在发布构建的时候有两类版本

1/runtime-only =>代码中不可以有任何的template

2/runtime-compiler => 代码中,可以有template,因为有compiler可以用于template的编译

一.如何配置

(1)添加以上文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{message}}</div>
  </body>
</html>

main.js

import Vue from "vue";
const app = new Vue({
  el: "#app",
  data: {
    message: "hello app",
  },
});

package.json

{
  "name": "day07",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.2.0",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": " webpack serve --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

let path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  //入口
  entry: path.join(__dirname, "./src/main.js"),
  //出口
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js",
  },
  //环境
  mode: "development",
  //插件
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
    }),
  ],
  devServer: {
    port: 3000, // 端口号
    open: true, // 自动打开浏览器
  },
  module: {
    rules: [
      {
        // 正则表达式，用于匹配所有的css文件
        test: /\.css$/,
        // 先用 css-loader 让webpack能够识别 css 文件的内容
        // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 900000,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  resolve: {   //这就就是的配置就是给定某种版本进行编译,如果没有这个,那么在运行时,index.html中的{{message}}是无法被编译的
    alias: {
      //别名
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

(2)依次执行一下命令

npm i vue  //安装vue包

npm install发 //将pageage.json中的包都安装一下

npm run dev  //因为是开发中,所以才用这个

二.以组件化去思考:终极配置方案

这个命令特别重要:因为vue-loader可以去打包.vue文件的内容, copmiler是可以将.vue的内容转为render函数,提升性能

执行命令:npm vue-loader vue-template-compiler --save-dev

分析:有一个SPA(single page application)的一个概念,单页面应用,就是只有index.html页面,而且这个页面时不做任何修改的.

(1)index.html文件内容(不在变动)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

(2)通过组件化来实现 main.js

import Vue from "vue";
import App from "./vue/app";  //默认导出所以才不需要大括号

// let App = {  //其实是把这里的代码拿到了app.js文件中
//   template: `
//         <div>
//             <h2>{{message}}</h2>
//         </div>
//     `,
//   data() {
//     return {
//       message: "hello world",
//     };
//   },
// };
new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App,
  },
});

(3)创建app.js

export default {
  template: `
        <div>
            <h2>{{message}}</h2>
        </div>
    `,
  data() {
    return {
      message: "hello world ,welcome to china",
    };
  },
};

分析:但是这样写了以后,会发现template 和数据没有进行分离,所以还需要创建App.vue

三.通过vue文件加载数据

(1)创建App.vue

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "hello world ,welcome to china",
    };
  },
};
</script>
<style scoped></style>

(2)修改main.js文件

import Vue from "vue";
// import App from "./vue/app";  //因为不需要了
import App from "./vue/App.vue";  //通过vue来实现

// let App = {
//   template: `
//         <div>
//             <h2>{{message}}</h2>
//         </div>
//     `,
//   data() {
//     return {
//       message: "hello world",
//     };
//   },
// };
new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App,
  },
});

(3)配置webpack.config.js

let path = require("path");

const htmlWebpackPlugin = require("html-webpack-plugin");

const VueLoaderPlugin = require("vue-loader/lib/plugin"); //编译vue,这里的配置非常重要

module.exports = {

//入口

entry: path.join(__dirname, "./src/main.js"),

//出口

output: {

path: path.join(__dirname, "./dist"),

filename: "bundle.js",

//环境

mode: "development",

//插件

plugins: [

new htmlWebpackPlugin({

template: path.join(__dirname, "./src/index.html"),

}),

new VueLoaderPlugin(),

devServer: {

port: 3000, // 端口号

open: true, // 自动打开浏览器

module: {

rules: [

{

// 正则表达式，用于匹配所有的css文件

test: /\.css$/,

// 先用 css-loader 让webpack能够识别 css 文件的内容

// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去

use: ["style-loader", "css-loader"],

{

test: /\.less$/,

use: ["style-loader", "css-loader", "less-loader"],

{

test: /\.(png|jpg|gif|jpeg)$/,

use: [

{

loader: "url-loader",

options: {

limit: 900000,

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: "babel-loader",

options: {

presets: ["@babel/preset-env"],

{

test: /\.vue$/, //通过vue实现,这里也需要

use: ["vue-loader"],

resolve: {

alias: {

extensions:['.js','.css','.vue']

//别名

vue$: "vue/dist/vue.esm.js",

};

(4)运行命令

yarn dev

posted @ 2021-02-22 21:57 zmztyas 阅读(136) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

zmztyas

webpack 之 使用vue配置