Last active
April 28, 2017 20:26
-
-
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'
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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