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

青旅半醒 2022-04-17 00:59 292阅读 0赞

### 文章目录 ###

*  解析和打包.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`源码：

<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这个模版来生成（这个文件请程序员自己生成）
            })
        ]
    };

## 运行结果 ##

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

![在这里插入图片描述][20181110223315728.png]

# 分析 #

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

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

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

document.getElementById(元素id)

因为其是在`.vue`文件内，而该文件本身并不支持原生的`JS`写法，由此我们可以再次推知`.vue`其还不支持`jQuery`，因为`jQuery`其本质是对原生`JS`的简化与封装，其底层还是基于原生`JS`的。

所以说我们在`.vue`文件内使用页面元素与其相关语法时要切记其毕竟不是在`HTML`内，尽管它们有很多相似之处，但毕竟不是同一个东西，因而还是存在着很多的不同之处的，不能随便套用，否则会入坑的。

[20181110223315728.png]: /images/20220417/220fba9f704e4134ad86d4c203664744.png