Ошибки Webpack Uglify в CSS

Я переживаю, пытаясь заставить Uglify работать с моим проектом, раньше я использовал Uglify и не доставлял проблем, но теперь я думаю, что это связано с SASS.

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
...
...

Эта ошибка повторяется много раз, по одному на каждый множественный пакет.

Это моя конфигурация веб-пакета.

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 и ничего, не работает.


webpack javascript html-webpack-plugin webpack-style-loader uglifyjs
person jjalonso    schedule 29.03.2016    source источник
comment
ваши ошибки относятся к css, поэтому добавление test: /\.js($|\?)/ к аргументу параметров должно помочь   -  person maioman    schedule 03.04.2016

Ответы (2)


arrow_upward
10
arrow_downward

Вы пытаетесь передать файлы CSS через подключаемый модуль UglifyJs, который не поддерживается.

Чтобы испортить только ваши источники JS, вы можете фильтровать по расширению файла.

В приведенном ниже примере будут использоваться только файлы Uglify с расширением .js или .jsx:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false,
  test: /\.(js|jsx)$/
})
person duncanhall    schedule 06.04.2016
comment
Я еще не проверял ваш ответ из-за свободного времени, но это имеет смысл, хотя плагин выполняет обе функции. - person jjalonso; 08.04.2016

arrow_upward
1
arrow_downward

Вы помещаете файлы SCSS как часть своей точки входа. В веб-пакете более распространенной практикой является требование нужных вам файлов (с точки зрения SCSS) внутри ваших JS-файлов.

// 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';
}

Затем вы настраиваете sass-loader для обнаружения и обработки тех операторов require, которые вы уже сделали со следующим загрузчиком.

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css!sass!')
}
person Eric    schedule 08.04.2016
comment
scss обрабатывается нормально, и я хочу, чтобы он был снаружи, проблема заключается в запуске uglify. - person jjalonso; 08.04.2016