Question

我正在php中运行vue实例，以加载捆绑的main.js Webpack编译器。
我在项目根目录中使用webpack.config.js，并且由于我的FE框架是Vue，所以需要进行以下设置：

    const path = require('path');
    const {VueLoaderPlugin} = require('vue-loader')
    module.exports = {
        mode: 'development',
        watch: true,
        module: {
            rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
                {
                    test: /\.js$/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',


                 {
                            loader: 'sass-loader',
                            options: {
                                data: '$color: red;'
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [new VueLoaderPlugin()]
 }

在下载DatePicker library和以下集合之后，第一次编译后出现错误：

ERROR in ./node_modules/@gravitano/vue-date-range-picker/index.js Module not found: Error: Can't resolve './src/components/DateRangePicker'

我注意到，解决此问题的方法是将.vue添加到所需的文件名中，是在此处修复该问题没有任何意义，我需要在webpack，但是在看到我在配置中有提示后，我正在寻找其他选项atm。谢谢。

Answer 1

尝试在'.vue'中添加resolve.extensions：

resolve: {
    ...
    extensions: ['*', '.js', '.vue', '.json']
},

即使规则规定，Webpack也不解析模块

1 个答案: