webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及这些版本中踩的一些大坑!!!

Posted 2020-10-31 侯赛雷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及这些版本中踩的一些大坑!!!相关的知识，希望对你有一定的参考价值。

一 vue-loader

我们先不管脚手架,只说vue-loader,简单讲就是可将.vue文件打包,实现组件化开发,即一个.vue文件就是一个组件,开发中只需要引入这个.vue组件就可以了!

然后.vue文件的特性:

即一个.vue中包含了模板,js,css三个模块来描述这个组件!

二新建webpack项目(超级多坑,一一来说)

首先新建demo目录,初始化 npm init --yes,然后安装webpack和webpack-dev-server,因为我这里没有指定版本,所以直接安装了最新的4.5.0版本,导致有许多配置的坑!,然后建立项目结构,如下图:

然后安装一些必要的组件:

vue-loader@14.2.2 ,这个我在实践中先安装的8.5.4,然后一直报错无法读取\'vue\',文件错误显示是vue-loader/lib下面的js,根据经验肯定是版本不对导致了,

这个时候两种解决办法:

一要么修改webpack的版本,

二要么修改vue-loader的版本

这里我采用修改vue-loader的版本,亲测如果是webpack@4.5.0,vue-loader@14.2.2.其他版本基本全部报错,真是坑!

然后就是其他的laoder:

,然后还有一点,如果是想用import的话还要安装babel:

最后--save安装vue,注意前面的最好都要--save-dev安装,然后再安装html-webpack-plugin插件便于html打包

三 webpack配置

配置如下:

const path=require(\'path\')
const htmlPlugin=require(\'html-webpack-plugin\')
module.exports={
    entry:{
        entry:\'./src/index.js\' //入口文件
    },
    output:{
        path:path.resolve(__dirname,\'dist\'),//dist的绝对路径,node的语法
        filename:\'./js/[name].js\',   //打包后的js文件名
    },
    resolve: {
        extensions: [ \'.js\', \'.vue\'],  //同时打包.vue文件
        alias:{
            \'vue$\':\'vue/dist/vue.js\'    //启用别名,这样可以直接引用 \'vue\'
        }
    },
    module:{
        rules:[
            //配置vue-loader,以,vue结尾的文件都使用vue-loader打包
            {
                test:/\\.vue$/,
                use:{
                    loader:\'vue-loader\'
                }
            },
            //配置babel,所有.js文件使用babel转换
            {
                test:/\\.js$/,
                use:{
                    loader:\'babel-loader\',
                    options:{
                        presets:[
                            "es2015"  //解析es6
                        ]
                    }
                },
                //排除插件安装目录
                exclude: /node_modules|vue\\/dist|vue-router\\/|vue-loader\\/|vue-hot-reload-api\\//
            }
        ]
    },
    //html打包插件
    plugins:[
        new htmlPlugin({
            hash:true,
            template:\'./src/index.html\'
        })
    ],
    devServer:{
        //监听服务的路径,3.6以上版本自动热更新
        contentBase:path.resolve(__dirname,\'dist\'),
        host:\'localhost\',
        compress:true,
        port:8082
    }
}

配置完成之后,新建.vue组件文件,然后简单写个例子:

这里有个坑:

不能直接写123,template标签里面必须写一个元素标签包裹,否则会报错

新建之后再引入,index.js入口文件如下:

import Vue from \'vue\'
import App from \'./App.vue\'   //引入,vue组件
new Vue({
    el:\'#vue\',
    data:{
        msg:\'haha\'
    },
    components:{
        \'app\':App   //引入模块化的.vue文件的组件
    }
});
{
    alert(123);
}

这里还有另一个坑,引入vue的时候现在这个版本好像不能直接\'vue\',而是\'vue/dist/vue.js\',除非在配置文件中配置别名,我上面已经配置过了,所以这里可以直接使用别名

,然后新建html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue</title>
    </head>
    <body>
        <div id="vue">
                {{msg}}
            <app></app>
        </div>
    </body>
</html>

,最后打包进行观察结果,发现.vue已经能成功使用,如果我们还想要一个组件,可以继续新建.vue组件开发,一个组件就是一个模块!抛开脚手架不说,这种开发方式和思想值得细细品味,哈哈!这个简单例子就到这里,其他的css样式什么的可以自己去尝试!

另外说一点,webpack3.6以上的版本会自动支持热更新,不需要其他配置,4.0以上版本,打包和运行命令多了一个--mode选项,而且是必须写:

即现在package.json的命令里我是这样配置的:

"scripts": {

　　"server": "webpack-dev-server --mode development --open",

　　"build": "webpack --mode development"

npm run server 直接运行

npm run build; 打包!

运行结果: