【问题标题】:Importing Moment.js makes webpack build fail导入 Moment.js 使 webpack 构建失败
【发布时间】:2020-06-23 14:36:29
【问题描述】:

尝试在我的 Laravel 项目中运行 npm run prod 时遇到这个奇怪的错误。

92% 块资产优化 OptimizeCssAssetsWebpackPluginCssSyntaxError: /css/app.css:3032:19: Missed semicolon

如果我在我的一个组件中删除以下导入,它似乎工作正常:

import moment from 'moment';
export default {
    filters: {
        humanTimestamp: function(timestamp) {
            return moment.unix(timestamp).fromNow();
        }
    },

这是我的webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css')
   .less('resources/assets/less/documentation.less', 'public/css').version();

mix.webpackConfig({
    output: {
        filename: '[name].js',
        chunkFilename: 'js/chunks/[contenthash].js',
    },
    resolve: {
        alias: {
            '@': __dirname + '/resources/assets/js/'
        }
    },
});

这是我的webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = {
    plugins: [
        new VuetifyLoaderPlugin()
    ],
    rules: [
        {
            test: /\.s(c|a)ss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        implementation: require('sass'),
                        sassOptions: {
                            fiber: require('fibers'),
                            indentedSyntax: true // optional
                        },
                    },
                },
            ],
        },
    ],
}

【问题讨论】:

    标签: javascript webpack momentjs


    【解决方案1】:

    moment 也有类似的问题。 试试

    import * as moment from 'moment';
    

    【讨论】:

      【解决方案2】:

      以前我也遇到过同样的问题。我通过以下不同方式导入它来解决。

      代替

      import moment from 'moment';
      

      试试这个

      import * as moment from 'moment';
      

      【讨论】:

        【解决方案3】:

        尝试忽略语言环境。这可能是由语言环境引起的

         import * as moment from "moment";  
         console.log(moment().format("YYYY"));
        
         plugins: [
         new webpack.IgnorePlugin(/^./locale$/, /moment$/)
          ]
        

        【讨论】:

          【解决方案4】:

          检查 /css/app.css 文件,它可能缺少分号

          【讨论】:

            猜你喜欢
            • 2019-01-11
            • 2018-06-19
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2018-07-24
            • 2017-07-25
            • 1970-01-01
            相关资源
            最近更新 更多