I just upgraded webpack in my react project from version 1 to the latest (3.5.5).
I followed the migration guide and there were no problems, however apparently tree shaking isn't applied to my bundle (all of aws-sdk is included in the bundle,even though I imported only the s3 module).
This is my webpack configuration:
webpack.config.base.js
const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
resolve: {
modules: [
paths.appSrc,
paths.appNodeModules
]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'eslint-loader',
include: paths.appSrc,
},
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(scss|sass)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
},
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: {
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: [
'react',
['es2015', { modules: false }],
'stage-1',
],
}
}
},
{
test: /\.svg$/,
use: {
loader: 'file-loader',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
}
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml
})
]
}
webpack.config.prod.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-
utils/InterpolateHtmlPlugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ShakePlugin = require('webpack-common-shake').Plugin;
const url = require('url')
const paths = require('./paths')
const baseConfig = require('./webpack.base')
function ensureSlash(path, needsSlash) {
const hasSlash = path.endsWith('/')
if (hasSlash && !needsSlash) {
return path.substr(path, path.length - 1)
} else if (!hasSlash && needsSlash) {
return path + '/'
} else {
return path
}
}
const homepagePath = require(paths.appPackageJson).homepage
const homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/'
const publicPath = '.' + ensureSlash(homepagePathname, true)
const publicUrl = '.' / +ensureSlash(homepagePathname, false)
const clientConfig = {
name: 'client',
bail: true,
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
paths.appIndexJs
],
output: {
path: paths.appBuild,
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
publicPath: publicPath
},
module: {
rules: [
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: "css-loader"
},
{
loader: "resolve-url-loader"
},
{
loader: "sass-loader?sourceMap"
}],
publicPath: publicPath
})
},
]
},
plugins: [
new InterpolateHtmlPlugin({ PUBLIC_URL: publicUrl }),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new UglifyJsPlugin({
sourceMap: true,
minimize: true,
compress: {
screw_ie8: true,
warnings: false
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
}),
new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
new ShakePlugin()
]
}
module.exports = merge(baseConfig, clientConfig)
I 've tried many different configs but nothing seems to work, does anyone have an idea of what I'm doing wrong?