commit 2520eb121d1ba2ea5e422823350b91b696aea037
parent 738a0ddcfec0b290f5d54137897c37705c52724e
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Fri, 11 Mar 2016 00:22:13 +0300
Use babel-preset-node5 for npm scripts
- move `.babelrc` config to `package.json`
- enable `babel-loader` cache
- add [`resolve.root`](https://webpack.github.io/docs/configuration.html#resolve-root) option
- add [`context`](https://webpack.github.io/docs/configuration.html#context) to common config
- add `target` to client's config for consistency
- reorder options in accordance with [configuration docs](https://webpack.github.io/docs/configuration.html)
- update file formatting
- add more comments
Diffstat:
4 files changed, 114 insertions(+), 60 deletions(-)
diff --git a/.babelrc b/.babelrc
@@ -1,10 +0,0 @@
-{
- "presets": [
- "es2015",
- "stage-0",
- "react"
- ],
- "plugins": [
- "transform-runtime"
- ]
-}
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
+ "babel-preset-node5": "^10.8.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.11.1",
@@ -87,6 +88,13 @@
"webpack-hot-middleware": "^2.10.0",
"webpack-middleware": "^1.5.1"
},
+ "babel": {
+ "presets": [
+ "react",
+ "node5",
+ "stage-0"
+ ]
+ },
"jest": {
"rootDir": "./src",
"testPathDirs": [
diff --git a/tools/start.js b/tools/start.js
@@ -45,9 +45,12 @@ async function start() {
.loaders
.filter(x => x.loader === 'babel-loader')
.forEach(x => (x.query = { // eslint-disable-line no-param-reassign
+ ...x.query,
+
// Wraps all React components into arbitrary transforms
// https://github.com/gaearon/babel-plugin-react-transform
plugins: [
+ ...(x.query ? x.query.plugins : []),
['react-transform', {
transforms: [
{
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -35,44 +35,39 @@ const GLOBALS = {
// -----------------------------------------------------------------------------
const config = {
+ context: path.join(__dirname, '../src'),
+
output: {
publicPath: '/',
sourcePrefix: ' ',
},
- cache: DEBUG,
- debug: DEBUG,
-
- stats: {
- colors: true,
- reasons: DEBUG,
- hash: VERBOSE,
- version: VERBOSE,
- timings: true,
- chunks: VERBOSE,
- chunkModules: VERBOSE,
- cached: VERBOSE,
- cachedAssets: VERBOSE,
- },
-
- plugins: [
- new webpack.optimize.OccurenceOrderPlugin(),
- ],
-
- resolve: {
- extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
- },
-
module: {
loaders: [
{
test: /\.jsx?$/,
+ loader: 'babel-loader',
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
- loader: 'babel-loader',
- }, {
+ query: {
+ // https://github.com/babel/babel-loader#options
+ cacheDirectory: DEBUG,
+
+ // https://babeljs.io/docs/usage/options/
+ babelrc: false,
+ presets: [
+ 'react',
+ 'es2015',
+ 'stage-0',
+ ],
+ plugins: [
+ 'transform-runtime',
+ ],
+ },
+ },
+ {
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
@@ -88,26 +83,52 @@ const config = {
})}`,
'postcss-loader?parser=postcss-scss',
],
- }, {
+ },
+ {
test: /\.json$/,
loader: 'json-loader',
- }, {
+ },
+ {
test: /\.txt$/,
loader: 'raw-loader',
- }, {
+ },
+ {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
- }, {
+ },
+ {
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
- }, {
+ },
+ {
test: /\.jade$/,
loader: 'jade-loader',
},
],
},
- postcss: function plugins(bundler) {
+ resolve: {
+ root: path.join(__dirname, '../src'),
+ modulesDirectories: ['node_modules'],
+ extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
+ },
+
+ cache: DEBUG,
+ debug: DEBUG,
+
+ stats: {
+ colors: true,
+ reasons: DEBUG,
+ hash: VERBOSE,
+ version: VERBOSE,
+ timings: true,
+ chunks: VERBOSE,
+ chunkModules: VERBOSE,
+ cached: VERBOSE,
+ cachedAssets: VERBOSE,
+ },
+
+ postcss(bundler) {
return [
require('postcss-import')({ addDependencyTo: bundler }),
require('precss')(),
@@ -121,37 +142,58 @@ const config = {
// -----------------------------------------------------------------------------
const clientConfig = extend(true, {}, config, {
- entry: './src/client.js',
+ entry: './client.js',
+
output: {
path: path.join(__dirname, '../build/public'),
filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
+ chunkFilename: DEBUG ? '[name].[id].js?[hash]' : '[name].[id].[hash].js',
},
- // Choose a developer tool to enhance debugging
- // http://webpack.github.io/docs/configuration.html#devtool
- devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
+ target: 'web',
+
plugins: [
- ...config.plugins,
+
+ // Define free variables
+ // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
+
+ // Emit a file with assets paths
+ // https://github.com/sporto/assets-webpack-plugin#options
new AssetsPlugin({
path: path.join(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
- ...(!DEBUG ? [
+
+ ...(DEBUG ? [] : [
+
+ // Search for equal or similar files and deduplicate them in the output
+ // https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
new webpack.optimize.DedupePlugin(),
+
+ // Assign the module and chunk ids by occurrence count
+ // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
+ new webpack.optimize.OccurenceOrderPlugin(true),
+
+ // Minimize all JavaScript output of chunks
+ // https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
compress: {
- // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
- screw_ie8: true,
-
- // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
+ screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
warnings: VERBOSE,
},
}),
+
+ // A plugin for a more aggressive chunk merging strategy
+ // https://webpack.github.io/docs/list-of-plugins.html#aggressivemergingplugin
new webpack.optimize.AggressiveMergingPlugin(),
- ] : []),
+ ]),
],
+
+ // Choose a developer tool to enhance debugging
+ // http://webpack.github.io/docs/configuration.html#devtool
+ devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
});
//
@@ -159,13 +201,16 @@ const clientConfig = extend(true, {}, config, {
// -----------------------------------------------------------------------------
const serverConfig = extend(true, {}, config, {
- entry: './src/server.js',
+ entry: './server.js',
+
output: {
- path: './build',
+ path: path.join(__dirname, '../build'),
filename: 'server.js',
libraryTarget: 'commonjs2',
},
+
target: 'node',
+
externals: [
/^\.\/assets$/,
function filter(context, request, cb) {
@@ -176,6 +221,19 @@ const serverConfig = extend(true, {}, config, {
cb(null, Boolean(isExternal));
},
],
+
+ plugins: [
+
+ // Define free variables
+ // https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+ new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
+
+ // Adds a banner to the top of each generated chunk
+ // https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
+ new webpack.BannerPlugin('require("source-map-support").install();',
+ { raw: true, entryOnly: false }),
+ ],
+
node: {
console: false,
global: false,
@@ -184,13 +242,8 @@ const serverConfig = extend(true, {}, config, {
__filename: false,
__dirname: false,
},
+
devtool: 'source-map',
- plugins: [
- ...config.plugins,
- new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
- new webpack.BannerPlugin('require("source-map-support").install();',
- { raw: true, entryOnly: false }),
- ],
});
export default [clientConfig, serverConfig];
