webpack 之 使用vue配置

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

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

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

 

 

一.如何配置

(1)添加以上文件

index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
<!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

?
1
2
3
4
5
6
7
import Vue from "vue";
const app = new Vue({
  el: "#app",
  data: {
    message: "hello app",
  },
});

　　

package.json

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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)依次执行一下命令

?
1
2
3
4
5
npm i vue  //安装vue包
 
npm install发 //将pageage.json中的包都安装一下
 
npm run dev  //因为是开发中,所以才用这个

　　

 

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

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

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

　　

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
export default {
  template: `
        <div>
            <h2>{{message}}</h2>
        </div>
    `,
  data() {
    return {
      message: "hello world ,welcome to china",
    };
  },
};　

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

 

三.通过vue文件加载数据

(1)创建App.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 @ 
 
zmztyas 
阅读(145) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
    

· go语言实现终端里的倒计时
    

· 如何编写易于单元测试的代码
    

· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
    

· .NET Core 中如何实现缓存的预热？
    



    

    阅读排行：
    

 ·          分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
        

 ·          25岁的心里话
        

 ·          基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
        

 ·          ollama系列01：轻松3步本地部署deepseek，普通电脑可用
        

 ·          按钮权限的设计及实现
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示