Skip to content

Instantly share code, notes, and snippets.

@FuruholmAnton
Last active February 24, 2017 18:10
Show Gist options
  • Save FuruholmAnton/ec50c2dc75f398aa4c9b468b6ec0f51d to your computer and use it in GitHub Desktop.
Save FuruholmAnton/ec50c2dc75f398aa4c9b468b6ec0f51d to your computer and use it in GitHub Desktop.
Webpack for JS, SCSS with PHP as a backend
"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')
})
],
};
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"
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment