本文主要是介绍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 简写为AppApp}, *///为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
这篇关于webpage结合Vue Loader打包单文件组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
