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"
}
// ...