javascript - Webpack 缩小和未缩小的 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 还不断地破坏我的 smooth.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'],
  },
};