Skip to content

Instantly share code, notes, and snippets.

@cristiandley
Created May 23, 2017 11:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cristiandley/7a82f9a8d308df3086cd7f51d9d9843b to your computer and use it in GitHub Desktop.
Save cristiandley/7a82f9a8d308df3086cd7f51d9d9843b to your computer and use it in GitHub Desktop.
Production Webpack Config
const webpack = require("webpack");
const { join, resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BabiliPlugin = require('babili-webpack-plugin');
// DOC: https://webpack.js.org/configuration/
module.exports = env => {
return {
entry: {
app: join(__dirname, "../src/index.js")
},
/**
* No se deberían usar nombres puros, que webpack los chuncks
* DOC: https://webpack.js.org/configuration/output/#output-chunkfilename
*/
output: {
filename: "[name].[chunkhash].js",
path: resolve(__dirname, "../dist"),
chunkFilename: '[chunkhash].js',
publicPath: "/"
},
module: {
loaders: [
{
test: /\.(js)$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
cacheDirectory: true
}
},
/**
* Plugin de webpack de como levantar .HTML!
* DOC: https://webpack.js.org/loaders/
*/
{
test: /\.html$/,
loader: "html-loader"
},
/**
* DOC: https://webpack.js.org/loaders/css-loader/
*/
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: "graphql-tag/loader"
},
{
test: /\.(jpg|png)$/,
use: "file-loader?name=[path][name].[hash].[ext]",
include: join(__dirname, "../src/imagenes")
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
/**
* CommonsChunkPlugin: crea archivos separados (chunks) de modulos comunes
* utilizados en la app.
* Separa la aplicación app.js de los modulos (librerias vendor) utilizadas.
* Se usa la tecnica de separar el manifest para que no re-genere un hash
* en el nombre del vendor cuando se cambia algo SOLO en la aplicacion.
*/
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => (
resource &&
resource.indexOf('node_modules') >= 0 &&
resource.match(/\.js$/)
)
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.UglifyJsPlugin(),
//new BabiliPlugin(),
/**
* Inyecta a nuestro HTML todos nuestros vendors y bundle
* DOC: https://github.com/jantimon/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: join(__dirname, "../src/template/index.html"),
filename: "index.html",
inject: "body"
})
]
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment