kucukkanat
5/19/2017 - 11:24 AM

Webpack Starter - React

Webpack Starter - React

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractSass = new ExtractTextPlugin({filename: "bundle.css"});

module.exports = {
    entry: "./src/app.js",
    target: 'web',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist/",
        library: "fixit",
        libraryTarget: "umd"
    },
    module: {
        rules: [
            {
                test: /\.(scss|sass)$/,
                use: extractSass.extract({
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                sourceMap: true
                            }
                        }, {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true
                            }
                        }
                    ],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }, {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader"
            }, {
                test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }, {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            }
        ]
    },
    devtool: 'source-map',
    context: __dirname,
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            comments: false,
            compress: {
                // remove warnings
                warnings: false,

                // Drop console statements
                drop_console: false
            }
        }),
        extractSass
    ]
}
{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-react": "^6.24.1",
    "bluebird": "^3.5.0",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "material-ui": "^0.18.1",
    "node-sass": "^4.5.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1",
    "react-tap-event-plugin": "^2.0.1",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "superagent": "^3.5.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "keywords": [],
  "author": "Virutal Affairs BV",
  "license": "ISC"
}