Doesn't hook up my files #62
Description
Hello! I'm trying to make build and deployment system for my project. I want to be able to serve gzipped vendor and custom JS files, and merged and gzipped single CSS file (cause vendor chunk also has some css in it). If I don't merge css with merge-files-webpack-plugin, everything goes well and I see 2 css files in the output, BUT when merging, I see my combined style.css intact(with deleteOriginalAssets: true) and no gzipped css. Seems like something's wrong with the order, or RegExp, or something...Please help! Webpack 2. Here's the code:
var path = require('path');
var webpack = require ('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MergeFilesPlugin = require('merge-files-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var cssProcessor = require('cssnano');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var CompressionPlugin = require('compression-webpack-plugin');
const VENDOR_LIBS = [ 'axios', 'crypto-js', 'jstimezonedetect', 'lodash', 'normalizr', 'react-motion', 'react', 'react-dom', 'react-router', 'redux-form', 'react-redux', 'react-router-redux', 'react-swipeable-views', 'react-tap-event-plugin', 'recompose', 'redux', 'redux-form-material-ui', 'redux-mediaquery', 'redux-thunk', 'reselect', 'reset-css', 'socket.io-client', 'material-ui/FlatButton', 'material-ui/TextField', 'material-ui/Table', 'material-ui/SelectField', 'material-ui/MenuItem', 'material-ui/Stepper', 'material-ui/Checkbox', 'material-ui/styles/colors',
'material-ui/Tabs', 'material-ui/FloatingActionButton', 'material-ui/DropDownMenu', 'material-ui/utils/colorManipulator', 'material-ui/Dialog', 'material-ui/CircularProgress', 'material-ui/Snackbar', 'material-ui/styles/MuiThemeProvider', 'material-ui/styles/getMuiTheme', 'material-ui/styles/spacing' ];
const config = {
entry: {
app: [ 'babel-polyfill', './app/index.js' ],
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'build'),
publicPath: 'build/',
filename: '[name].js',
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin('[name].css'),
new MergeFilesPlugin({
filename: 'style.css',
test: /\.css$/,
deleteSourceFiles: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: cssProcessor,
cssProcessorOptions: { discardComments: {removeAll: true} },
safe: true,
canPrint: true
}),
new CompressionPlugin({
asset: 'gzip/[file][query]',
algorithm: 'gzip',
test: /style.css/g,
threshold: 0,
minRatio: 0.8,
deleteOriginalAssets: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: '[name].js',
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
compressor: {
warnings: false
}
}),
/* new BundleAnalyzerPlugin({
analyzerMode: 'static'
}), */
new CompressionPlugin({
asset: 'gzip/[file][query]',
algorithm: 'gzip',
test: /\.js$/g,
threshold: 0,
minRatio: 0.8
// ,deleteOriginalAssets: true
})
],
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader?name=[path][name].[ext]',
options: { limit: 40000, outputPath: 'images/' }
},
'image-webpack-loader'
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader?modules&localIdentName=[path][name]_[local]--[hash:base64:8]',
{
loader: 'postcss-loader',
options: {
importLoaders: 1
}
}
]
})
},
{
use: [{
loader: 'babel-loader',
options: { presets: ['react', 'es2015', 'stage-1'] },
}],
test: /\.js$/,
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: false,
devServer: {
historyApiFallback: true,
contentBase: './app'
}
};
module.exports = config;