FuruholmAnton
2/24/2017 - 6:09 PM

Webpack for JS, SCSS with PHP as a backend

Webpack for JS, SCSS with PHP as a backend

module.exports = [
	{
		test: /\.js?$/,
		exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
	},
      {
        test: /\.css/,
        use: [
          {
            loader: 'isomorphic-style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // CSS Loader https://github.com/webpack/css-loader
              importLoaders: 1,
              sourceMap: process.env.NODE_ENV === "development",
              // CSS Modules https://github.com/css-modules/css-modules
              modules: true,
              localIdentName: process.env.NODE_ENV === "development" ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
              // CSS Nano http://cssnano.co/options/
              minimize: process.env.NODE_ENV !== "development",
              discardComments: { removeAll: true },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: './tools/postcss.config.js',
            },
          },
        ],
      },
	{
		test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
		exclude: /(node_modules|bower_components)/,
		loader: "file"
	},
	{
		test: /\.(woff|woff2)$/,
		exclude: /(node_modules|bower_components)/,
		loader: "url?prefix=font/&limit=5000"
	},
	{
		test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
		exclude: /(node_modules|bower_components)/,
		loader: "url?limit=10000&mimetype=application/octet-stream"
	},
	{
		test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
		exclude: /(node_modules|bower_components)/,
		loader: "url?limit=10000&mimetype=image/svg+xml"
	},
	{
		test: /\.gif/,
		exclude: /(node_modules|bower_components)/,
		loader: "url-loader?limit=10000&mimetype=image/gif"
	},
	{
		test: /\.jpg/,
		exclude: /(node_modules|bower_components)/,
		loader: "url-loader?limit=10000&mimetype=image/jpg"
	},
	{
		test: /\.png/,
		exclude: /(node_modules|bower_components)/,
		loader: "url-loader?limit=10000&mimetype=image/png"
	}
];
"use strict";

var webpack = require('webpack');
const path = require('path');
var loaders = require('./tools/webpack.loaders');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
require("babel-polyfill");

const extractSass = new ExtractTextPlugin({
    // filename: "public/[name].[contenthash].css",
    filename: "public/[name].css",
    disable: process.env.NODE_ENV === "development",
    allChunks: true
});

loaders.push({
  test: /\.scss$/,
  loader: extractSass.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }),
  exclude: ['node_modules']
});

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: ["babel-polyfill", './main.js'],
  },
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'bundle.js',
  },
  devtool: "source-map",
  module: {
    loaders
  },
  plugins: [
      // output a separate css bundle
      // new ExtractTextPlugin({ filename: 'public/[name].css', disable: false, allChunks: true }),
      extractSass,

      // reloads browser when the watched files change
      new BrowserSyncPlugin({
        // use existing Apache virtual host
        proxy: 'http://example.dev/',
        tunnel: true,
        // watch the built files and the index file
        files: ['src/*', 'index.php']
      }),

      // set node env
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
      })
    ],
};