Webpack Uglify errors in CSS

﹥>﹥吖頭↗ 提交于 2019-12-23 07:34:06

问题


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.

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
    }),
    ]
};

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.


回答1:


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

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

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)$/
})



回答2:


You are putting SCSS files as part of your entry point. In webpack, it is a more common practice to require the files you need (SCSS wise) inside of your JS files.

// Here, the ExtractTextPlugin will use sass-loader to extract and compile styles
require('styles.scss');

// The rest of your code goes here
// For instance, app.js
function someCode() {
    document.body.style.backgroundColor = 'blue';
}

You then setup the sass-loader to detect and handle those require statements which you have already done with the following loader.

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css!sass!')
}


来源:https://stackoverflow.com/questions/36294628/webpack-uglify-errors-in-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!