/game-off-2017

Permalink
Switch branches/tags
Nothing to show
Find file
game-off-2017/webpack.config.babel.js
f6bd3bf Nov 29, 2017
@n3tn0de @Charliiee
Raw Blame History
158 lines (145 sloc) 4.03 KB
const { join, resolve } = require(`path`);
const webpack = require(`webpack`);
const HtmlWebpackPlugin = require(`html-webpack-plugin`);
const DashboardPlugin = require(`webpack-dashboard/plugin`);
const isDevelopment = process.env.NODE_ENV === `development`;
const phaserModule = join(__dirname, './node_modules/phaser-ce/')
const phaser = join(phaserModule, 'build/custom/phaser-split.js')
const pixi = join(phaserModule, 'build/custom/pixi.js')
const p2 = join(phaserModule, 'build/custom/p2.js')
const entry = {
app: [resolve(__dirname, `./src/index.js`)],
};
const output = {
path: resolve(__dirname, `./dist/`),
filename: isDevelopment ?
`assets/[name]-[hash].js` : `assets/[name]-[chunkhash].js`,
publicPath: isDevelopment ? `/` : `./`,
};
const plugins = {
common: [
new webpack.EnvironmentPlugin({ NODE_ENV: `production` }),
new webpack.DefinePlugin({
// add globals' names in .eslintrc to avoid warnings
IS_DEVELOPMENT: JSON.stringify(isDevelopment),
}),
new webpack.optimize.CommonsChunkPlugin({
name: `vendor`,
minChunks: (module) => {
// This prevents stylesheet resources with the .css or .scss extension
// from being moved from their original chunk to the vendor chunk
if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
return false;
}
return module.context && module.context.indexOf(`node_modules`) !== -1;
},
}),
new HtmlWebpackPlugin({
filename: `index.html`,
template: `./src/index.ejs`,
inject: `body`,
cache: true,
minify: !isDevelopment && {
removeComments: true,
collapseWhitespace: true,
conservativeCollapse: true,
},
}),
],
development: [
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
production: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: { comments: false },
warnings: false,
compress: { drop_console: true },
sourceMap: true,
}),
],
};
const rules = {
common: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: `babel-loader`,
},
{ test: /pixi\.js/, use: ['expose-loader?PIXI'] },
{ test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
{ test: /p2\.js/, use: ['expose-loader?p2'] }, {
test: /\.(mp3|ogg|m4a|aac)$/,
loader: `file-loader?name=assets/audio/[name]-[hash].[ext]`,
}, {
test: /\.(ttf|woff)$/,
loader: `file-loader?name=fonts/[name].[ext]`,
}],
development: [{
test: /\.(png|jpg|jpeg|gif)$/,
loader: `url-loader?limit=25000&name=assets/graphics/[name]-[hash].[ext]`,
}],
production: [{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: `url-loader`,
options: {
limit: 25000,
name: `assets/graphics/[name]-[hash].[ext]`,
},
}, {
loader: `image-webpack-loader`,
query: {
mozjpeg: {
progressive: true,
},
progressive: true,
optipng: {
optimizationLevel: 6,
},
gifsicle: {
interlaced: true,
optimizationLevel: 3,
},
},
}],
}],
};
const devServer = {
host: process.env.DEV_HOST || `0.0.0.0`,
port: process.env.DEV_PORT || 3000,
contentBase: `dist/`,
hot: true,
stats: { colors: true },
};
module.exports = {
devtool:
process.env.DEVTOOL ||
isDevelopment ? `cheap-module-eval-source-map` : undefined,
entry: isDevelopment ? {
...entry,
app: [
`webpack-dev-server/client?http://localhost:${devServer.port}/`,
`webpack/hot/only-dev-server`,
...entry.app,
],
} : entry,
output,
resolve: {
alias: {
phaser,
pixi,
p2,
}
},
plugins: isDevelopment ?
[...plugins.common, ...plugins.development] :
[...plugins.common, ...plugins.production],
module: {
rules: isDevelopment ?
[...rules.common, ...rules.development] :
[...rules.common, ...rules.production],
},
devServer,
};