Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pass environment variables to Webpack through --env to run conditional builds
{
"name": "burkov",
"version": "2.0.0",
"description": "Personal blog of Boris Burkov",
"scripts": {
"clean": "rm -rf dist/*",
"build": "node_modules/.bin/webpack -p --env.prod",
"serve": "node_modules/.bin/webpack-dev-server --progress --colors --history-api-fallback",
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "npm run clean && npm run build && git add dist && git add index.html && git commit -a -m 'deploy' && git push"
},
...
}
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function(env) {
// set variables, depending on whether this is dev or prod, see: https://github.com/webpack/webpack/issues/2254
var indexFilename = (env && env.prod) ? path.join(__dirname, "index.html") : "index.html";
var publicPath = (env && env.prod) ? '/dist/' : '/';
return {
entry: path.join(__dirname, 'src', 'app.jsx'),
output: {
path: path.join(__dirname, 'dist'),
publicPath: publicPath,
filename: 'app.[hash:7].js'
},
resolve: {
modules: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
inject: "body",
template: "src/index.html",
filename: indexFilename
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']
}
},
{
test: /\.(scss|sass)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: {sourceMap: true} },
{ loader: 'sass-loader', options: {sourceMap: true} }
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(eot|com|json|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
devServer: {
publicPath: '/',
contentBase: './',
hot: true
},
devtool: "source-map"
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.