webpage结合Vue Loader打包单文件组件

npm insatll vue-loader vue-template-compiler

webpage.config.js

//引用node.js中的path模块，用来处理文件路径
const path = require("path");
//引入插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
//1.添加vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//（1）导入webpack，模块热替换需要
const webpack = require('webpack');
// 导出一个webpack具有特殊属性配置的对象
// 安装下Node Snippets插件，输入module会有智能提示
module.exports = {
    mode: 'none',//指定打包为生产环境、开发环境或者设置none
    //入口
    entry: './src/main.js',// 入口模块文件路径
    //出口对象
    output: {
        // path 必须是一个绝对路径 , __dirname 是当前配置文件webpack.config.js的绝对路径。然后与输出目录dist拼接成一个决定路劲
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            //指定要打包的模板页面index.html,采用的是相对路径，与当前配置文件在同级目录，所以为./。就会找到把index.html文件并把它打包到与输出文件bundle.js的同级目录下
            template: './index.html'
        }),
        // 3.请确保引入这个插件！
        new VueLoaderPlugin(),
        //(3)实例化模块热替换插件
        new webpack.HotModuleReplacementPlugin()
    ],
    //实时重新加载
    devServer: {
        //在当前目的dist目录下查找文件
        contentBase: './dist',
        hot: true //（2）开启模块热替换
    },
    module: {
        rules: [ //配置css转js的规则
            {
                test: /\.css$/,//正则表达式，匹配以css结尾文件
                use: [ //下面2个加载器的顺序不能反
                    'style-loader',//让javascript识别转换后的js（css）
                    'css-loader' //css转为js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {//解决兼容性问题
                test: /\.m?js$/,
                exclude: /(node_modules)/,//排除node_modules【是各种插件安装目录】下的代码不用babel_loader去转换
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']//babel中内置的转换规则工具，刚才配套一起安装的就还有这个
                    }
                }
            },
            { //2.指定扩展名为.vue的文件用vue-loader加载
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
/*     // 去引用完整版 vue.js 
    resolve:
    {
        alias:
            { 'vue$': 'vue/dist/vue.js' }
    } */
}

main.js 

// import Hello from './Hello.vue'
// Vue是自己取的名称，一般V大写，后面的vue是安装的vue组件名称，不能更改
//这种方法导入的vue不是完整版本，不具有编译功能.因为这vue是指安装的node_modules\vue\ package.json 中的 main属性执行的vue版本dist/vue.runtime.common.js。而这个版本是运行时版本，不具有编译功能，所以会有警告错误
import Vue from 'vue'
//解决方法1：手动引入完整版本
//import Vue from 'vue/dist/vue.js'
//在main.js中要把App.vue作为其子组件使用，就要把它导入，并取名为App
import App from './App.vue'
//导入Vue之后就可以使用Vue了
new Vue({
    el:"#app",
   /*  //注册子组件
    components:{ //上面导入了App.vue，这里就把它作为components的一个选项设置即可
        // App:App 简写为App
        App
    }, */
     //为Vue组件(根组件)设置模板
     //template没有编译和渲染功能，编译功能可以使用vue-loader进行编译
     //而渲染功能可以通过render函数进行，所以在此处只需要指定render函数渲染组件即可
     //template:'<App />', //<app></app> a大写也可以的
     /* render:function(h){ //h是一个函数，这个函数用于接收要渲染的组件
        return h(App) //函数返回值就是渲染的结果
     } */
   /*   render:h=>{
         return h(App)
     } */
     render:h=>h(App)
})

最后执行build