I can't find anything useful to help me understand how can I change dev mode to production mode in React. Do I have do install any additional packages? What are the best plugins to minify my js and css files?
This is my webpack.config:
module.exports = {
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
filename: "./js/out.js"
},
devServer: {
inline: true,
contentBase: './',
port: 3001
},
watch: true,
module: {
loaders: [{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','stage-2', 'react']
}
}, {
test: /\.scss$/,
loader: ['style-loader', 'css-loader' , 'sass-loader',]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
]
}
};
As for webpack v4 use mode
:
module.exports = {
mode: 'production',
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
filename: "./js/out.js"
},
This will set process.env.NODE_ENV
to production
.
for earlier versions use WebpackDefinePlugin
to set NODE_ENV
:
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
]