不使用vue-cli,webpack搭建vue环境踩踩踩过的坑

初始化项目,生成一个package.json文件

npm init

使用webpack构建，先安装webpack，但是webpack4.x版本需要安装webpack-cli,由于只在开发环境下使用webpack构建

npm install webpack webpack-cli --save-dev

安装vue vue-loader

npm install vue vue-loader --save

创建一个webpack.config.js文件，配置项目入口，项目输出以及必要的插件

const path=require('path');
const webpack=require('webpack');
/*
*好像是新版的vue-loader必须要引入这个插件才可以正常运行
*/
const VueLoaderPlugin=require('vue-loader/lib/plugin');
const HtmlWebpackPlugin =require('html-webpack-plugin');
entry:'./src/main.js',
    output: {
        path:path.resolve(__dirname,'dist'),
        filename: 'bunlde.js',
        publicPath:PUBLIC_PATH
    },
    module: {
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                },

            },
            {
                test:/\.vue$/,
                use:{
                    loader:'vue-loader'
                }
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: "index.html"
        })
    ]

这里说明一下，必须要要配置的：
一个是对于js文件的loader，因为不配置就不能将入口文件那个解析····这是自己踩的坑之一吧
还有一个必须配置的是HtmlWebpackPlugin这个插件，因为这是把index.html解析的一个插件···这也是踩的坑之一
可以参考这个文章html-webpack-plugin详解
这两个配置完之后就可以根绝网上别的配置过程正常运行了···
不使用vue-cli,webpack搭建vue环境踩踩踩过的坑
main.js中代码

import Vue from 'vue';
import App from './App.vue'

new Vue({
    el:'#app',
    components:{
        App
    },
    render: (h) => h(App)
})