Skip to content

Commit

Permalink
Upgrade webpack (facebook#1291)
Browse files Browse the repository at this point in the history 
* Upgrade webpack

* Address more webpack v2 ...

* Update html-webpack-plugin

* Remove LoaderOptionsPlugin from dev config

* ExtractTextPlugin still uses webpack 1 syntax
... and doesn't support complex options (yet)

* Grammar nit

* Update extract text webpack plugin

* - Remove webpack.LoaderOptionsPlugin
- Update deps

* Lerna hoists packages

* Update extract-text-webpack-plugin

* Update webpack-dev-server

* Remove imports for the tests

* stop removing babelrc
  • Loading branch information
@Timer
Timer committed Feb 11, 2017
1 parent b94beb0 commit 3050eb5
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 115 deletions.
109 changes: 62 additions & 47 deletions config/webpack.config.dev.js
View file
Expand Up @@ -78,15 +78,15 @@ module.exports = {
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
// We use `fallback` instead of `root` because we want `node_modules` to "win"
// if there any conflicts. This matches Node resolution mechanism.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
fallback: paths.nodePaths,
modules: ['node_modules'].concat(paths.nodePaths),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
extensions: ['.js', '.json', '.jsx', ''],
extensions: ['.js', '.json', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
Expand All @@ -97,21 +97,32 @@ module.exports = {
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
// directory of `react-scripts` itself rather than the project directory.
resolveLoader: {
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
modules: [
paths.ownNodeModules,
// Lerna hoists everything, so we need to look in our app directory
paths.appNodeModules
]
},
// @remove-on-eject-end
module: {
// First, run the linter.
// It's important to do this before Babel processes the JS.
preLoaders: [
rules: [
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}
],
loaders: [
enforce: 'pre',
use: [{
// @remove-on-eject-begin
// Point ESLint to our predefined config.
options: {
configFile: path.join(__dirname, '../.eslintrc'),
useEslintrc: false
},
// @remove-on-eject-end
loader: 'eslint-loader'
}],
include: paths.appSrc
},
// ** ADDING/UPDATING LOADERS **
// The "url" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
Expand All @@ -128,8 +139,8 @@ module.exports = {
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
Expand All @@ -138,8 +149,8 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
loader: 'babel-loader',
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
Expand All @@ -157,46 +168,44 @@ module.exports = {
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss'
},
// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
test: /\.json$/,
loader: 'json'
use: [
'style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1
}
}, {
loader: 'postcss-loader',
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: function () {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
})
]
}
}
}
]
},
// "file" loader for svg
{
test: /\.svg$/,
loader: 'file',
query: {
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
// ** STOP ** Are you adding a new loader?
// Remember to add the new extension(s) to the "url" loader exclusion list.
]
},
// @remove-on-eject-begin
// Point ESLint to our predefined config.
eslint: {
configFile: path.join(__dirname, '../.eslintrc'),
useEslintrc: false
},
// @remove-on-eject-end
// We use PostCSS for autoprefixing only.
postcss: function() {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
}),
];
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
Expand Down Expand Up @@ -229,5 +238,11 @@ module.exports = {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false
}
};
127 changes: 67 additions & 60 deletions config/webpack.config.prod.js
View file
Expand Up @@ -52,8 +52,8 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
// Making sure that the publicPath goes back to to build folder.
? { publicPath: Array(cssFilename.split('/').length).join('../') }
: undefined;
? {publicPath: Array(cssFilename.split('/').length).join('../')}
: {};

// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
Expand Down Expand Up @@ -83,15 +83,15 @@ module.exports = {
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
// We use `fallback` instead of `root` because we want `node_modules` to "win"
// if there any conflicts. This matches Node resolution mechanism.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
fallback: paths.nodePaths,
modules: ['node_modules'].concat(paths.nodePaths),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
extensions: ['.js', '.json', '.jsx', ''],
extensions: ['.js', '.json', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
Expand All @@ -102,21 +102,34 @@ module.exports = {
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
// directory of `react-scripts` itself rather than the project directory.
resolveLoader: {
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
modules: [
paths.ownNodeModules,
// Lerna hoists everything, so we need to look in our app directory
paths.appNodeModules
]
},
// @remove-on-eject-end
module: {
// First, run the linter.
// It's important to do this before Babel processes the JS.
preLoaders: [
rules: [
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
loader: 'eslint',
enforce: 'pre',
use: [{
// @remove-on-eject-begin
// Point ESLint to our predefined config.
options: {
// TODO: consider separate config for production,
// e.g. to enable no-console and no-debugger only in production.
configFile: path.join(__dirname, '../.eslintrc'),
useEslintrc: false
},
// @remove-on-eject-end
loader: 'eslint-loader'
}],
include: paths.appSrc
}
],
loaders: [
},
// ** ADDING/UPDATING LOADERS **
// The "url" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
Expand All @@ -133,8 +146,8 @@ module.exports = {
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
Expand All @@ -143,9 +156,9 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
loader: 'babel-loader',
// @remove-on-eject-begin
query: {
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
},
Expand All @@ -165,53 +178,48 @@ module.exports = {
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style',
'css?importLoaders=1!postcss',
extractTextPluginOptions
)
loader: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
}, {
loader: 'postcss-loader',
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: function () {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
})
]
}
}
}
]
}, extractTextPluginOptions))
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
test: /\.json$/,
loader: 'json'
},
// "file" loader for svg
{
test: /\.svg$/,
loader: 'file',
query: {
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
// ** STOP ** Are you adding a new loader?
// Remember to add the new extension(s) to the "url" loader exclusion list.
]
},
// @remove-on-eject-begin
// Point ESLint to our predefined config.
eslint: {
// TODO: consider separate config for production,
// e.g. to enable no-console and no-debugger only in production.
configFile: path.join(__dirname, '../.eslintrc'),
useEslintrc: false
},
// @remove-on-eject-end
// We use PostCSS for autoprefixing only.
postcss: function() {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
}),
];
},
plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
Expand Down Expand Up @@ -241,10 +249,6 @@ module.exports = {
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This helps ensure the builds are consistent if source hasn't changed:
new webpack.optimize.OccurrenceOrderPlugin(),
// Try to dedupe duplicated modules, if any:
new webpack.optimize.DedupePlugin(),
// Minify the code.
new webpack.optimize.UglifyJsPlugin({
compress: {
Expand All @@ -257,10 +261,13 @@ module.exports = {
output: {
comments: false,
screw_ie8: true
}
},
sourceMap: true
}),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
new ExtractTextPlugin(cssFilename),
new ExtractTextPlugin({
filename: cssFilename
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
Expand Down
3 changes: 2 additions & 1 deletion fixtures/kitchensink/.babelrc
View file
@@ -1,3 +1,4 @@
{
"presets": ["react-app"]
"presets": ["react-app"],
"plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
}
1 change: 1 addition & 0 deletions fixtures/kitchensink/.template.dependencies.json
View file
@@ -1,6 +1,7 @@
{
"dependencies": {
"babel-register": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
"babel-polyfill": "6.20.0",
"chai": "3.5.0",
"jsdom": "9.8.3",
Expand Down

0 comments on commit 3050eb5

Please sign in to comment.