webpack

postcss.config.js

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    // parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      // cssnano: options.enabled.optimize ? cssnanoConfig : false,
      cssnano: false,
      autoprefixer: true,
    },
  };
};

webpack.config.js

'use strict';

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');

const rootPath = __dirname;

const config = {
  paths: {
    root: rootPath,
    assets: path.join(rootPath, 'assets'),
    dist: path.join(rootPath, 'src/public'),
  },
  'entry': {
    'main': [
      './scripts/main.js',
      './styles/main.scss'
    ]
  }
};

let webpackConfig = {
  context: config.paths.assets,
  entry: config.entry,
  devtool: 'source-map',
  output: {
    path: config.paths.dist,
    // publicPath: config.publicPath,
    filename: 'scripts/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
        use: [
          { loader: 'cache' },
          { loader: 'babel' }
        ],
      },
      {
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
          fallback: 'style',
          use: [
            { loader: 'cache' },
            { loader: 'css', options: { sourceMap: true } },
            {
              loader: 'postcss', options: {
                config: { path: __dirname },
                sourceMap: true,
              },
            },
            { loader: 'resolve-url', options: { sourceMap: true } },
            { loader: 'sass', options: { sourceMap: true } }
          ]
        })
      },
      {
        test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
        include: config.paths.assets,
        loader: 'url',
        options: {
          limit: 4096,
          name: '[path][name].[ext]'
        }
      },
      {
        test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
        include: /node_modules|bower_components/,
        loader: 'url',
        options: {
          limit: 4096,
          outputPath: 'vendor/',
          name: '[name].[ext]'
        },
      }
    ]
  },
  resolve: {
    modules: [
      config.paths.assets,
      'node_modules',
      'bower_components',
    ]
  },
  resolveLoader: {
    moduleExtensions: ['-loader']
  },
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new CopyGlobsPlugin({
      pattern: 'images/**/*',
      output: '[path][name].[ext]',
      manifest: {},
    }),
    new ExtractTextPlugin({
      filename: 'styles/[name].css',
      allChunks: true
    })
  ]
};

module.exports = webpackConfig;