带有 Webpack 的 Vue 组件答案

【问题标题】：Vue Component with Webpack带有 Webpack 的 Vue 组件
【发布时间】：2020-12-01 15:04:39
【问题描述】：

我想我可能在这里患上了脑雾症。我只想使用 Webpack 渲染一个简单的 Vue 组件。下面的代码和配置的结果只是在编译时呈现<hello></hello>。

错误似乎源于单一文件组件的<style> 部分。控制台报错：

Uncaught ReferenceError: h1 is not defined
    at eval (VM659 index.js:12)
    at Object../node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/layout.vue?vue&type=style&index=0&id=ecebbf8c&scoped=true&lang=css& (main.js:283)
    at __webpack_require__ (main.js:579)
    at eval (VM655 layout.vue:5)
    at Module../src/components/layout.vue?vue&type=style&index=0&id=ecebbf8c&scoped=true&lang=css& (main.js:313)
    at __webpack_require__ (main.js:579)
    at eval (VM655 layout.vue:7)
    at Module../src/components/layout.vue (main.js:256)
    at __webpack_require__ (main.js:579)
    at eval (index.js:3)

webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'assets/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    devServer: {
        port:9000,
        index: 'index.htm',
        host: 'hello.local'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            },
            {
                test: /\.pug$/,
                use: [
                    'pug-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.pug',
            filename: 'index.htm',
            inject: true
        })
    ]
}

index.js

import Vue from 'vue';
import Hello from './components/hello.vue';

Vue.component('hello', Hello)

new Vue({
    el: '#app'
});

index.pug

html
    body
        #app
            hello

你好.vue

<template>
    <h1>Hello</h1>
</template>

<style scoped>
    h1
    {
        color:blue;
    }
</style>

<script>
export default {
    
}
</script>

生成的 HTML

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <hello></hello>
        </div>
        <script src="/assets/main.js"></script>
    </body>
</html>

【问题讨论】：

标签： vue.js webpack

【解决方案1】：

我的解决方案是使用 mini-css-extract-plugin 提取 css。更新的 webpack 配置为：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'assets/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    devServer: {
        port:9000,
        index: 'index.htm',
        host: 'hello.local'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.pug$/,
                use: [
                    'pug-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.pug',
            filename: 'index.htm',
            inject: true
        })
    ]
}

计划稍后提取 CSS，所以不确定为什么这不适用于原始配置。如果有人能指导我解释原因，那就太好了！

【讨论】：