CSS 中的 Webpack Uglify 错误

问题描述

我强调尝试让 Uglify 与我的项目一起工作，以前我使用过 Uglify 并且没有出现问题，但现在我认为这与 SASS 相关.

Im stressed trying to make Uglify working with my project, previously I have used Uglify and was not giving problems but now I think that is SASS related.

ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss
    Module build failed: TypeError: Cannot read property '4' of undefined
        at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23)
        at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22)
        at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5)
        at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75
        at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28
        at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26
...
...

这个错误重复了很多次，每个多包一个.

This error is repeated a lot of times, one per each multiple bundle.

这是我的 webpack 配置.

This is my webpack config.

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
  context: __dirname,
  resolve: {
    modulesDirectories: ['node_modules', 'bower_components']
  },
  entry: {
    'all': [
      './app/global-all.js',
      './app/scss/global-all.scss'
    ],
    'footer': [
      './app/global-footer.js',
      './app/scss/global-footer.scss'
    ],
    'header': [
      './app/global-header.js',
      './app/scss/global-header.scss'
    ],
    'footer.nodeps': [
      './app/global-footer-nodeps.js',
      './app/scss/global-footer-nodeps.scss'
    ],
    'header.nodeps': [
      './app/global-header-nodeps.js',
      './app/scss/global-header-nodeps.scss'
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/global.[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style','css!sass!')
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file?name=/assets/[name].[ext]'
      },
      {
        test: /\.(jpg|jpeg|png)$/,
        loader: 'file?name=/assets/[name].[ext]'
      }
    ],
  },
  plugins: [
    new webpack.EnvironmentPlugin([
      'NODE_ENV'
    ]),
    new ExtractTextPlugin('css/global.[name].css'),
    new HtmlWebpackPlugin({
      template: 'underscore-template-loader!./app/views/secondary.html',
      inject: false,
      filename: 'secondary.html'
    }),
        new HtmlWebpackPlugin({
      template: 'underscore-template-loader!./app/views/secondary-transparent.html',
      inject: false,
      filename: 'secondary-transparent.html'
    }),
    new HtmlWebpackPlugin({
      template: 'underscore-template-loader!./app/views/secondary-academy.html',
      inject: false,
      filename: 'secondary-academy.html'
    }),
    new HtmlWebpackPlugin({
      template: 'underscore-template-loader!./app/views/hero-stage.html',
      inject: false,
      filename: 'hero-stage.html'
    }),

    // Only minify in build, check npm tasks
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    }),
    ]
};

如果我评论 uglifyJsPlugin 行，没有错误.但是我必须进行缩小并且无法让它运行，我尝试了 mangler: false 和 nothing，不起作用.

If I comment the uglifyJsPlugin line, is no errors.But I have to do minification and is no way to make it run, I tried mangler: false and nothing, doesn't work.

推荐答案

您正在尝试通过 UglifyJs 插件传递 CSS 文件，该插件不受支持.

You are trying to pass CSS files through the UglifyJs plugin, which is not supported.

要仅丑化您的 JS 源，您可以根据文件扩展名进行过滤.

To uglify only your JS sources, you can filter based on file extension.

下面的示例只会丑化具有 .js 或 .jsx 扩展名的文件:

The example below would only Uglify files that had a .js or .jsx extension:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false,
  test: /\.(js|jsx)$/
})

这篇关于CSS 中的 Webpack Uglify 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！