webpack配置vue

1.安装Vue（通过npm）

npm i vue -S

2. 安装Vue-loader

npm i vue-loader vue-template-compiler -D

3.配置vue-loader与plugin

• 配置loader与plugin

......
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
      VueLoaderPlugin } = require('vue-loader'); // 必须要的

module.exports = {
     
	......
	module: {
     
        rules: [
            {
      test: /\.vue$/, use: 'vue-loader' },  // 配置处理以.vue结尾的文件loader
            {
      test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
      template: './src/index.html' }),
        new VueLoaderPlugin()  // 写入配置对象
    ],
}

4.配置vue引入问题

在webpack中默认映入的Vue是引入Vue中的vue.runtime.common.js文件，这个文件只包含了部分vue的功能
我们需要修改引入文件：

方法1

直接修改，导入vue模块中的package.json的main属性，将main属性改为vue.js

因为：webpack引用模块的时候，模块都会给出一个入口文件，通过main.js指定入口文件，所以我们只需要手动修改main属性即可解决问题

方法2（推荐）

通过配置webpack配置文件的resolve属性来解决引用问题

module.exports = {
     
	......
    resolve: {
     
        alias: {
     
        	// 通过这种方式指定引入vue结尾的模块时，导入vue模块的dist/vue.js文件
        	// vue$ 代表以vue结尾的模块名
            vue$: path.resolve(__dirname, './node_modules/vue/dist/vue.js')
        }
    },
};

运行就不会出问题