Webpack minimierte und Unminified Js und Css

Question

Hier ist die Dateistruktur von dem, was ich will:

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

Hier ist mein 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'], 
    }, 
}; 

Diese derzeit gibt

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

UglifyJs hält auch meine schlanke.css-Datei wie folgt:

Wie mache ich das?

Was ist nicht was ich will.

Answer 1

UglifyJS war hier das Problem, aus irgendeinem Grund, es mit CSS vermasselt Dateien, obwohl es hat JS in seinem Namen, der nur dumm ist.

BabiliPlugin arbeitete viel besser, da es nicht mit Zohan an CSS-Dateien haben.

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

Versuchen Sie output Config Wechsel zu:

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

Und ExtractTextPlugin ‚s config:

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