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也一直像这样破坏我的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的配置是：

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