webpack解析和打包.vue组件页面

最新推荐文章于 2024-09-28 07:00:00 发布

张侦毅

最新推荐文章于 2024-09-28 07:00:00 发布

阅读量2.5k

点赞数 2

分类专栏： Vue Vue 文章标签： webpack 打包.vue组件页面 .vue

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83933343

版权

Vue 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

Vue

39 篇文章 4 订阅

订阅专栏

文章目录

解析和打包.vue组件页面
示例
- 源码
- 运行结果
分析

解析和打包.vue组件页面

Vue中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，其必须借助于webpack的vue-loader才能使用。

所需依赖

vue: vue js核心包
vue-loader:  .vue文件编译loader
vue-template-compiler:.vue模版编译，被vue-loader所依赖。
babel-plugin-transform-runtime:es6实时转换成es5语法

开发阶段的依赖包：

cnpm i vue-loader vue-template-compiler babel-plugin-transform-runtime  --save-dev

运行阶段的依赖包：

cnpm i vue --save

示例

源码

App.vue源码：

<!--Vue项目的跟组件-->
<template>
    <span v-text="msg" class="red"></span>
</template>

<script>
    //负责导出.vue这个组件对象
    //它本质上是一个Vue对象，所以Vue中该定义的元素都可以使用
    export default {
        data(){
            return {
                msg:'Hello World!'
            }
        }
    }
</script>

<style scoped>
/*其中的scoped意识是这里定义的css样式只是在当前页面中有效，不会影响到其它组件页面*/
    .red{
        color: blue;
    }
</style>

main.js源码：

//1、导入vue核心包
import Vue from 'vue';
//2、导入App.vue的vue对象
import App from './App.vue';
//3、利用Vue对象进行解析渲染
new Vue({
    el:'#app'
    ,render:c=>c(App)    //es6的函数写法，是goes to 语法
    //上面的等价于render:function(create){create(App)}
});

index.html源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
    <meta name="vireport" content="width=device-width,initial-scale=1,mininum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="app"></div>
</body>
</html>

package.json源码：

{
  "name": "csspackage",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 4009"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "css-loader": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.0"
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

webpack.config.js源码：

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry:'./src/main'   //指定打包的入口文件
    ,output:{
        path:__dirname +  '/dist'
        ,filename:'build.js'
    }
    ,module:{
        loaders:[
            {
                test:/\.css$/
                ,loader:'style-loader!css-loader'
            }
            ,{
                test:/\.scss$/
                ,loader:'style-loader!css-loader!sass-loader'
            }
            ,{
                test:/\.less/                    //打包.less文件
                ,loader:'style-loader!css-loader!sass-loader!less-loader'
            }
            ,{
                test:/\.(png|jpg|gif|ttf)$/           //打包url请求的资源文件
                ,loader:'url-loader?limit=20000'     //limit表示图片的大小为40k是临界值，小于20k的图片均被
                // 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
            }
            ,{
                test:/\.js$/           //将.js文件中的es6语法转换成es5语法
                ,loader:'babel-loader'
                ,exclude:/node_modules/    //nodejs依赖库中的js文件全部都不需要进行转换
            }
            ,{
                test:/\.vue$/           //解析.vue组件页面文件
                ,loader:'vue-loader'
            }
        ]
    }
    ,babel:{
        presets:['es2015']     //配置将es6语法转换成es5语法
        ,plugins:['transform-runtime']    //这句代码就是为了解决打包.vue文件不报错
    }
    ,plugins:[
        new htmlwp({
            title:'首页'   //生成的页面标题
            ,filename:'index.html'  //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
            ,template:'index.html'  //根据index.html这个模版来生成（这个文件请程序员自己生成）
        })
    ]
};

运行结果

在控制台中运行下面代码查看运行结果：

在这里插入图片描述

分析

上面的代码所实现的功能就是在页面打印Hello World!，如上图所示，我们成功的在页面中打印出了该字符串，这说明项目本身编译与运行是没有问题的。

由于上面的代码中，绝大多数内容都是在之前文章中有提到，所以说这里就单单重点说说.vue文件。

在上面的代码中，我们可以发现在.vue文件中，其语法结构与在HTML中是及其相似的。与我们之前所写的HTML一样，其有template、script、style标签，而且其内部代码的编写，其与之前的HTML中的代码编写几乎一样，这里需要说明的是，.vue毕竟不是HTML，因而我们不能像在HTML中一样操作各种DOM节点，比如说下面的代码我们就不能使用：