webpack.config.base.js

const fs = require('fs');
const packageFile = require('./package.json');
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const postcssUse = require('postcss-use');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


const babelRC = fs.readFileSync(path.join(__dirname, '.babelrc'));
const baseConfig = {
    entry: {
        app: path.join(__dirname, 'src', 'js', 'index.jsx')
    },
    output: {
        filename: '[name].js',
        pathinfo: true, // set to false on production
        // chunkFilename: '[chunk]-[hash].js',
        path: path.join(__dirname, 'crm', packageFile.version),
        publicPath: `/crm/${packageFile.version}/`
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)/,
                include: [
                    path.join(__dirname, 'src'),
                ],
                loader: 'babel-loader',
                query: {
                    babelrc: babelRC,
                    // This is a feature of `babel-loader` for webpack (not Babel itself).
                    // It enables caching results in ./node_modules/.cache/babel-loader/
                    // directory for faster rebuilds.
                    cacheDirectory: true
                }
            },
            {
                test: /\.json$/,
                loader: [
                    'json-loader'
                ]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                autoprefixer: false,
                                sourceMap: true,
                                modules: true,
                                importLoaders: 1,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: [
                                    require('postcss-import')({ root: __dirname }),
                                    require('postcss-mixins')(),
                                    require('postcss-each')(),
                                    //require('postcss-modules-values')(),
                                    require('postcss-cssnext')()
                                ]
                            }
                        }
                    ]
                    //loader:'css-loader?sourceMap&modules&importLoaders=1!postcss-loader?sourceMap&sourceComments'
                }),
                include: [
                    path.join(__dirname, 'node_modules'),
                    //path.join(__dirname, 'src/js/actions'),
                ]
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    loader: 'css-loader?importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader?sourceComments!sass-loader'
                })
            },
            { test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf|mp3|wav|ico)$/, loader: 'url-loader?limit=50000' },
        ]
    },
    resolve: {
        alias: {
            css: path.join(__dirname, 'src/css'),
            img: path.join(__dirname, 'src/img'),
            audio: path.join(__dirname, 'src/assets/audio'),
            font: path.join(__dirname, 'src/font')
        },
        extensions: [ '.js', '.json', '.jsx', '.css', '.styl', '.scss' ],
        unsafeCache: true
    },
    plugins: [
        new webpack.SourceMapDevToolPlugin({
            exclude: ['vendor.js']
        }),
        new webpack.DefinePlugin({
            'process.env': {
                VERSION: JSON.stringify(packageFile.version),
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'localhost'),
                BUILD_ENVIRONMENT: JSON.stringify(process.env.BUILD_ENVIRONMENT || process.env.NODE_ENV || 'localhost')
                // FIXME more coming
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context && (module.context.indexOf('node_modules') !== -1);
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        }),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, 'src/assets/icons'),
            to: 'icons'
        }]),
        new HtmlWebpackPlugin({
            chunks: ['manifest', 'vendor', '0', 'app'],
            title: `Smarty CRM`,
            filename: path.join('..', 'index.html'),
            template: path.join(__dirname, 'src/assets/index.html'),
            favicon: path.join(__dirname, 'src/assets/favicon.ico'),
        }),
        new WriteFilePlugin({ log: true }),
        new ExtractTextPlugin({
            filename:'styles/[name].css',
            allChunks: true
        }),

        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        })
    ],
    devtool: 'cheap-eval-source-map'
};
module.exports = baseConfig;