wonderbeyond
12/28/2016 - 6:28 AM

webpack 1.x config example

webpack 1.x config example

var constants = require('./constants');
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

if (process.env.NODE_ENV != 'production') process.env.NODE_ENV = 'development';
var PRODUCTION = process.env.NODE_ENV == 'production';

var config = {
    entry: 'index',

    output: {
        path: path.resolve('dist'),
        filename: PRODUCTION ? "[name]-[chunkhash].js" : "[name].js",
        publicPath: "/",
    },
    module: {
        loaders: [{
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style", "css!sass"),
        }, {
            test: /\.(jpg|png|gif)$/,
            loader: "file-loader",
        }, {
            test: /\.vue$/,
            loader: 'vue',
        }, {
            test: /\bswipe\b/,
            loader: "exports-loader",
            query: {
                Swipe: true
            },
        }, {
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: 'babel?presets[]=es2015&compact=false&cacheDirectory=true'
        }, {

            test: /\bsmooth-scroll\b/,
            loader: "exports-loader",
        }]
    },

    resolve: {
        root: [
            path.resolve('./modules'),
            path.resolve('./node_modules'),
        ],
        alias: {
            swipe: 'swipejs/swipe',
        },
    },
    plugins: [
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch',
            'Promise': 'imports?this=>global!exports?global.Promise!es6-promise',
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new ExtractTextPlugin(PRODUCTION ? "[name]-[chunkhash].css" : "[name].css"),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(PRODUCTION),
        }),
    ]
};

PRODUCTION && Array.prototype.push.apply(config.plugins, [
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.DedupePlugin(),
]);

module.exports = config;
// ...
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --inline --host=0.0.0.0 --port=8000",
    "production": "NODE_ENV=production webpack --bail"
  }
// ...