Webpack уменьшенная и Unminified Js и Css

Question

Вот структура файла, что я хочу:

- dist 
    - js 
    - jPlayer.js 
    - jPlayer.min.js 
    - css 
    - skins 
     - sleek.css 
     - sleek.min.css 

Вот мои webpack.config.js

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'; 
import autoprefixer from 'autoprefixer'; 
import webpack from 'webpack'; 

const debug = process.env.NODE_ENV !== 'production'; 

export default { 
    context: __dirname, 
    entry: { 
    'jPlayer.js': './build.js', 
    'jPlayer.min.js': './build.js', 
    'sleek.css': './src/less/skins/sleek.less', 
    'sleek.min.css': './src/less/skins/sleek.less' 
    }, 
    output: { 
    path: './dist/', 
    filename: '[name]', 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['transform-class-properties', 'transform-decorators-legacy'], 
     }, 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css-loader?importLoaders=1' + 
      '!postcss-loader' + 
      '!less-loader'), 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|svg)(\?[\s\S]+)?$/, 
     loader: 'url-loader?limit=100000', 
     }, 
     { 
     test: /\.(jpg)$/, 
     loader: 'file-loader', 
     }, 
    ], 
    }, 
    plugins: [ 
    new ExtractTextPlugin('[name]'), 
    new webpack.optimize.UglifyJsPlugin({ 
     include: /\.min\.js$/, 
    }), 
    new OptimizeCssAssetsPlugin({ 
     assetNameRegExp: /\.min\.css$/ 
    }) 
    ], 
    postcss:() => [autoprefixer], 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
}; 

Это в настоящее время выводит

- dist 
    - jPlayer.js 
    - jPlayer.min.js 
    - sleek.css 
    - sleek.min.css 

UglifyJs также держит mangling мой файл sleek.css следующим образом:

Как это сделать?

Это не то, что я хочу.

Answer 1

UglifyJS была проблема здесь, почему-то портит с CSS файлы, даже если он имеет JS - это имя, которое просто глупо.

BabiliPlugin работал намного лучше, так как он не испортил файлы css.

import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'; 
import autoprefixer from 'autoprefixer'; 
import BabiliPlugin from 'babili-webpack-plugin'; 

export default { 
    context: __dirname, 
    entry: { 
    'js/jPlayer.js': './src/index.js', 
    'js/jPlayer.min.js': './src/index.js', 
    'css/skins/sleek.css': './src/less/skins/sleek.less', 
    'css/skins/sleek.min.css': './src/less/skins/sleek.less', 
    }, 
    output: { 
    path: './dist/', 
    filename: '[name]', 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['transform-class-properties', 'transform-decorators-legacy'], 
     }, 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css-loader?importLoaders=1' + 
      '!postcss-loader' + 
      '!less-loader'), 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|svg)(\?[\s\S]+)?$/, 
     loader: 'url-loader?limit=100000', 
     }, 
     { 
     test: /\.jpg$/, 
     loader: 'file-loader', 
     }, 
    ], 
    }, 
    plugins: [ 
    new ExtractTextPlugin('[name]'), 
    new OptimizeCssAssetsPlugin({ 
     assetNameRegExp: /\.min\.css$/, 
    }), 
    new BabiliPlugin({}, { 
     test: /\.min\.js$/, 
    }), 
    ], 
    postcss:() => [autoprefixer], 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 
}; 

Answer 2

Попробуйте изменить output конфигурации для:

output: { 
    path: './dist/', 
    filename: 'js/[name]', 
} 

И ExtractTextPlugin «s конфигурации для:

new ExtractTextPlugin('./css/[name].css')