1.5、Vue-loader

1.5.1、安装依赖

npm i vue vue-loader vue-template-compiler -S

const {VueLoaderPlugin} = require('vue-loader');
const config ={
  module:{
  rules:[
        {
              test:/\.vue$/,
          loader:'vue-loader'
        }
      ]
    },
    plugins:[
          new VueLoaderPlugin()
    ]
}
module.exports = config

1.5.2、配置index.js

import './assets/styles/base.css'
import App from './App.vue'
import Vue from 'vue';
const root = document.createElement("div");
document.body.appendChild(root);
new Vue({
    render:h=>h(App)
}).$mount(root)

1.5.3、完整的配置

const webpack = require('webpack');
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'
const config = {
    target: "web",
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: '[hash].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name]-[hash].[ext]'
                    }
                }]
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            template: path.join(__dirname, 'public/index.html')
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        })
    ],
    mode: "development"
}
if (isDev) {
    config.devtool = "#cheap-module-eval-source-map"
    config.devServer = {
        port: 8080,
        host: 'localhost',
        overlay: {
            errors: true
        },
        hot: true
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}
module.exports = config
if (module.hot) {
    // 实现热更新
    module.hot.accept();
}