Question

尝试使用webpack编译vue文件时出现以下错误，但在编译材质设计图标时发生错误（我认为）。

[   ＆＃39;！./ node_modules / CSS-装载机./ node_modules / postcss装载机/ lib中（的WebPack） - 材料设计-图标/材料设计icons.css   模块构建失败：语法错误

（4:12）不必要的大括号

\ u001b [90m 2 | \ u001b [39m \ u001b [90m *   http://google.github.io/material-design-icons/ * / \ u001b [39m   \ u001b [90m 3 | \ u001b [39米   \ u001b [31m \ u001b [1m> \ u001b [22m \ u001b [39m \ u001b [90m 4]   \ u001b [39m \ u001b [36m @ font-face \ u001b [39m \ u001b [33m {\ u001b [39m]   \ u001b [90m | \ u001b [39m \ u001b [31m \ u001b [1m ^ \ u001b [22m \ u001b [39m]   \ u001b [90m 5 | \ u001b [39m font-family \ u001b [33m：\ u001b [39m   \ u001b [32m \＆＃39;材料图标\＆＃39; \ u001b [39m \ u001b [33m; \ u001b [39m]   \ u001b [90m 6 | \ u001b [39m font-style \ u001b [33m：\ u001b [39m   正常\ u001b [33米; \ u001b [39米

@（webpack）-material-design-icons / material-design-icons.css 2：14-108   @（webpack）-material-design-icons / index.js @ multi   的WebPack材料设计-图标＆＃39 ;,   ＆＃39; ./ node_modules / VUE装载机/ lib目录?? VUE装载机选项C：！？/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue VUE和放大器;类=风格和放大器;指数= 0安培; LANG =更少   模块解析失败：意外字符\＆＃39; @ \＆＃39; （14：0）你可能需要一个   适当的加载器来处理这种文件类型。 | | | @进口   \＆＃39;资产/风格/ main.less \＆＃39 ;; | @   ？C：/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue VUE＆安培;类型=风格＆安培;索引= 0＆安培;朗=更少   1：0-175 1：191-194 1：196-368 1：196-368 @   C：/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/App.vue @   C：/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/ClientApp.js   @ C：/Users/sprgu/Workspace/fieldtec/formbird-frontend/src/main.js' ] [[   ＆＃39;配置\＆＃39;模式\＆＃39;选项尚未设置。设置\'＃模式\＆＃39;   开发的选项\＆＃39;或\＆＃39;生产\＆＃39;启用默认值   这个环境。＆＃39; ]

这是我完整的webpack.config文件：

"use strict";

var webpack = require('webpack')
var path = require('path')
var extractTextPlugin = require('extract-text-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')

function resolve (dir) {
    return path.join(__dirname, '../../formbird-frontend/', dir)
}

module.exports = {
    entry: {
        bundle: "../../formbird-frontend/src/main.js",
        vendors: [
            "webpack-material-design-icons"
        ]
    },
    output: {
        path: path.join(__dirname, '../../formbird-frontend/dist/components'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: 'lazyload.[name].js',
        sourceMapFilename: 'sourcemaps/bundle.map'
    },
    plugins: [
        new webpack.ProvidePlugin({
            "jQuery": "jquery",
            "window.moment": "moment",
            "window.jQuery": "jquery", // the window.jQuery mapping is needed so Angular will find jQuery and use the full jQuery
                                       // rather than JQLite
            "$": "jquery",
            "window.$": "jquery"
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false,
            vue: {
                loaders: {
                    js: 'babel-loader',
                    css: extractTextPlugin.extract({
                        fallback: 'vue-style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: { importLoaders: 1 }
                            },
                            'postcss-loader'
                        ]
                    })
                }
            }
        }),
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    // // set modules that are server-side only to empty so they won't be loaded in the browser
    // node: {
    //     fs: "empty",

    //     // tls and net used in shared/utils/UtilBase64.js 
    //     // from 8792: Create function to convert an image from an image url to Base64 encoding
    //     tls: "empty",
    //     net: "empty"
    // },
    bail: true, // make the build fail if there is a build error. If this wasn't true the build would succeed but an error would be
                 // shown in the app when the module that doesn't exist is loaded
    module: {
        // expose the jquery object to the global window. This is needed for jquery libraries like jSignature
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            { 
                test: /(\.css$)/, 
                loaders: ['style-loader', 'css-loader', 'postcss-loader'] 
            }, 
            {
                test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/, 
                loader: "file?name=[name].[ext]"
            },
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: 'style-loader'
                    }, 
                    {
                        loader: 'css-loader'
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
}

我在这里想念什么？请帮我。我没有在谷歌寻找问题的运气。谢谢！

如何解决语法错误：Webpack postcss loader的不必要的Curly Bracket？

0 个答案: