Skip to content

Instantly share code, notes, and snippets.

@MrRoyce
Last active April 28, 2017 20:26
Show Gist options
  • Save MrRoyce/280063164a5f744cb0ec3ecc36be84a7 to your computer and use it in GitHub Desktop.
Save MrRoyce/280063164a5f744cb0ec3ecc36be84a7 to your computer and use it in GitHub Desktop.
webpack.config.js to debug problem with Module not found: Error: Cannot resolve module 'babel-runtime'
/**
* @Author: Royce
* @Date: 2016-06-12T10:54:44-04:00
* @Email: [email protected]
* @Project: Tonight
* @Last modified by: royce
* @Last modified time: 2016-09-23T19:58:59-04:00
* @License: © 2016 Tonight LLC All Rights Reserved
*/
/*eslint-disable global-require*/
const
path = require('path')
;
const resolve = path.resolve;
const root = resolve(__dirname);
//const modules = path.join(root, 'node_modules');
const
HtmlWebpackPlugin = require('html-webpack-plugin'), //used to create default index.html
merge = require('webpack-merge'),
webpack = require('webpack'),
NpmInstallPlugin = require('npm-install-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
CopyWebpackPlugin = require('copy-webpack-plugin')
;
const NODE_ENV = process.env.NODE_ENV;
const dotenv = require('dotenv');
// Load *package.json* so we can use `dependencies` from there
const pkg = require('./package.json');
const
PATHS = {
//react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
app : path.join(__dirname, 'src'),
fonts : path.join(__dirname, 'fonts'), //copied direcly with copy-webpack-plugin
styles : path.join(__dirname, 'src', 'styles'),
modules : path.join(__dirname, 'node_modules'),
test : path.join(__dirname, 'test'),
assets : path.join(__dirname, 'src', 'assets'),
images : path.join(__dirname, 'src', 'assets', 'images'),
build : path.join(__dirname, 'build')
},
TARGET = process.env.npm_lifecycle_event
;
const common = {
entry : [
require.resolve('./polyfills'),
PATHS.app
],
// entry : {
// app : PATHS.app
// },
output : {
path : PATHS.build,
publicPath : '/',
filename : '[name].js' // Output using the entry name instead of bundle.js
},
resolveLoader: {
root : path.resolve('node_modules'),
moduleTemplates : ['*-loader']
},
module : {
loaders : [
{
test : /\.json$/,
loader : 'json-loader'
},
{
test : /\.js?$/,
exclude : /node_modules/,
loader : 'babel',
query : (TARGET === 'build' || TARGET === 'stats') ? require('./babel.prod') : require('./babel.dev')
}
]
},
resolve : {
root : [path.join(__dirname)],
extensions : ['', '.js', '.jsx'],
alias : {
'actions' : path.join(PATHS.app, 'actions'),
'assets' : path.join(PATHS.app, 'assets'),
'components' : path.join(PATHS.app, 'components'),
'containers' : path.join(PATHS.app, 'containers'),
'config' : path.join(root),
'css' : path.join(PATHS.app, 'styles'), // duplicate from styles
'logic' : path.join(PATHS.app, 'logic'),
'reducers' : path.join(PATHS.app, 'reducers'),
'src' : PATHS.app,
'styles' : path.join(PATHS.app, 'styles'),
'utils' : path.join(PATHS.app, 'utils'),
// This `alias` section can be safely removed after ejection.
// We do this because `babel-runtime` may be inside `react-scripts`,
// so when `babel-plugin-transform-runtime` imports it, it will not be
// available to the app directly. This is a temporary solution that lets
// us ship support for generators. However it is far from ideal, and
// if we don't have a good solution, we should just make `babel-runtime`
// a dependency in generated projects.
// See https://github.com/facebookincubator/create-react-app/issues/255
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator')
}
},
devServer : {
historyApiFallback : true,
contentBase : './'
},
plugins: [
new webpack.optimize.DedupePlugin() // remove duplicate dependencies
]
};
// ENV variables
const dotEnvVars = dotenv.config();
const environmentEnv = dotenv.config({
path: path.join(root, 'config', `${NODE_ENV}.config.js`),
silent: true
});
const envVariables =
Object.assign({}, dotEnvVars, environmentEnv);
const defines =
Object.keys(envVariables)
.reduce((memo, key) => {
const val = JSON.stringify(envVariables[key]);
memo[`__${key.toUpperCase()}__`] = val;
return memo;
}, {
__NODE_ENV__: JSON.stringify(NODE_ENV)
});
common.plugins = [
new webpack.DefinePlugin(defines)
].concat(common.plugins);
// END ENV variables
//
// Default configuration. Return this if
// webpack is called outside of npm.
if (TARGET === 'start' || !TARGET || TARGET === 'test') {
module.exports = merge(common, {
output : {
path : __dirname,
publicPath : '/',
filename : 'bundle.js',
pathinfo : true
},
externals : {
'react/lib/ReactContext': true,
'react/lib/ExecutionEnvironment': true,
'react/addons': true
},
devtool : 'eval-source-map',
devServer : {
// Enable history API fallback so HTML5 History API based
// routing wrks. This is a good default that will come in
// handy in more complicated setups
historyApiFallback : true,
progress : true,
stats : 'errors-only', // Display only error to reduce the amount of output
host : process.env.HOST, // Parse host and port from env to allow customization
port : process.env.PORT,
contentBase : './'
},
plugins : [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save : true
})
],
module : {
loaders : [
{
// Test expects a regExp, note the slashes
test : /\.css$/,
loaders : ['style', 'css']
}
]
}
});
}
// Production build
if (TARGET === 'build' || TARGET === 'stats') {
module.exports = merge(common, {
bail: true,
// Define vendor entry point needed for splitting
entry : {
// Set up an entry chunk for our vendor bundle.
// You can filter out dependencies here if needed with
// `.filter(...)`.
vendor : Object.keys(pkg.dependencies)
},
// eeded this node param to fix weird bug
// about finding fs when running build
node: {
fs: 'empty'
},
output : {
path : PATHS.build,
filename : '[name].[chunkhash].js',
chunkFilename : '[chunkhash].js'
},
module : {
loaders : [
// Extract CSS during build
{
test : /\.css$/,
loader : ExtractTextPlugin.extract('style', 'css')
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(true),
// Output extracted CSS to a file
new ExtractTextPlugin('[name].[chunkhash].css'),
new CleanWebpackPlugin([PATHS.build]), // clean build dir
// Extract vendor and manifest files
new webpack.optimize.CommonsChunkPlugin({
names : ['vendor', 'manifest'],
children: true
}),
// Setting DefinePlugin affects React library size!
// DefinePlugin replaces content "as is" so we need some
// extra quotes for the generated code to make sense
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
}),
new HtmlWebpackPlugin({ // Used to create default index.html
title : 'Go Tonight',
template : path.join(PATHS.assets, 'index.ejs'),
mobile : true,
inject : false,
favicon : path.join(__dirname, 'src', 'assets', 'images', 'favicon.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
}),
new CopyWebpackPlugin([ // copy robots, favicon, etc
{ from: path.join(PATHS.assets, 'robots.txt') },
{ from: path.join(PATHS.styles, 'icon-style.css'), to: 'styles'},
{ from: PATHS.fonts, to : 'fonts' } // create font directory on build
])
]
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment