webpack构建vue单文件组件

1. 安装vue-loader和vue-template-compiler
   npm i vue-loader vue-template-compiler --save-dev
2. 配置webpack.config.js

var path = require('path');
var webpack = require('webpack');
var VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
      
        filename: 'build.js' // 打包后的文件名
    },
    plugins:[
        new VueLoaderPlugin(),
    ],
    devServer: {
        contentBase:path.resolve(__dirname,"dist"),
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                  
                ]
                
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]?[hash]'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                
            }
            
        ]
    }

};

3. 在src目录下新建一个App.vue

.vue文件分成3个部分

template：html代码,相对于用extend定义组件时的template部分

script:js代码，用extend定义组件时的methods、data这些部分都写在这里

style:css

vue文件里template的根div的id可以不要，js里的name也可以不要，name和id也不要求一样

util.js

exports.testfunc = function test(){
    console.log('test');
    return "test";
}

main.js
相当于在vue里嵌入一个子组件
components声明子组件，template使用子组件
new vue对象，el:"app"，相对于把一个叫vue的组件自动挂载到index.html的app元素下，里面有一个子组件app，类似：
new todoItem().$mount('#todoItem');

import Vue from 'vue';
import App from './App.vue';
import './style/common.css';


new Vue({
  el: '#app',
  template: '',
  components: { App }
})

index.html

挂载vue到div#app

碰到的问题：

1. ExtractTextPlugin配置了css路径后，css不起作用的问题：
   index.html中没有用link引入css，可以手动修改index.html,引入css
   也可以结合HtmlWebpackPlugin，HtmlWebpackPlugin会自动加入link引入需要的css文件，也会自动加入script引入需要的js文
   件

2. HtmlWebpackPlugin没有配置模板时，会使用默认模板生成index.html，自动加入需要的css和js的引用，如果目标文件夹下也有index.html，会被覆盖

3. build时出现错误：webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

新版本的vue-loader需要配合一个 webpack 插件才能正确使用：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}

4.Vue packages version mismatch 错误：
vue-template-compiler和vue版本必须一致，如果不一致，重新安装 vue-template-compiler让其跟vue版本一致即可

5.文件名不区分大小写，上例中App.vue在main.js中引入时，可以写成：
import App from './app.vue';

6.如果App.vue引入后的名字改成其他，则后面模板的定义要改成对应的名字，比如：
import Vue from 'vue';
import App2 from './app.vue';
import './style/common.css';

new Vue({
el: '#app',
template: '',
components: { App2 }
})
三者要保持统一