Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Usage webpack --mode production or webpack --mode development
// This will be called from package.json - yarn scripts
const path = require('path');
const webpack = require('webpack');
const config = require('config');
// Plugins
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
const S3Plugin = require('webpack-s3-plugin');
module.exports = (env, options) => {
const mode = options.mode;
// For debugging and source maps we want the unminified version in development
// If you want to add a library to be used externally, you will need to add it here
const copyMap = {
'react': (mode === 'development') ? 'react/dist/react.js' : 'react/dist/react.min.js',
'react-dom': (mode === 'development') ? 'react-dom/dist/react-dom.js' : 'react-dom/dist/react-dom.min.js',
'redux': (mode === 'development') ? 'redux/dist/redux.js' : 'redux/dist/redux.min.js',
'react-redux': (mode === 'development') ? 'react-redux/dist/react-redux.js' : 'react-redux/dist/react-redux.min.js',
'axios': (mode === 'development') ? 'axios/dist/axios.js' : 'axios/dist/axios.min.js',
'react-modal': (mode === 'development') ? 'react-modal/dist/react-modal.js' : 'react-modal/dist/react-modal.min.js',
'cap-web-components': (mode === 'development') ? '@bbc/cap-web-components/dist/cap-web-components.js' : '@bbc/cap-web-components/dist/cap-web-components.js'
}
const webpackConfig = [{
name: 'Server Side',
target: 'node',
entry: {
play: './app/react/play-bundle.js',
listen: './app/react/listen-bundle.js'
},
output: {
path: path.join(__dirname, "app/es5-bundles"),
filename: '[name].js',
libraryTarget: "commonjs2" // https://github.com/webpack/webpack/issues/1114
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin(["./app/es5-bundles/*", "./web/*"])
],
resolve: {
extensions: ['.js', '.json', '.jsx'],
symlinks: false
},
watchOptions: {
poll: 1000,
ignored: /node_modules/
}
},
// CLIENT SIDE CONFIG
{
name: 'Client Side',
// target: 'web',
entry: {
play: './app/react/play.jsx',
listen: './app/react/listen.jsx'
},
devtool: (mode === 'development') ? "source-map" : false,
output: {
path: path.join(__dirname, "web/assets/"),
filename: 'js/[name].[chunkhash].js',
libraryTarget: 'amd'
},
externals: {
"react-dom": "react-dom",
"react": "react",
"react-redux": "react-redux",
"redux": "redux",
"axios": {
amd: "axios"
},
"react-modal": {
amd: "react-modal"
},
"@bbc/cap-web-components": {
amd: "cap-web-components"
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
// If you are having trouble with urls not resolving add this setting.
// See https://github.com/webpack-contrib/css-loader#url
url: false,
minimize: (mode !== 'development'),
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}
]
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.scss']
},
plugins: [
// Im sure there's a less verbose way to do this but i started to become tired
// hash:10 because https://github.com/webpack-contrib/copy-webpack-plugin/issues/104
new CopyWebpackPlugin([
{ from: copyMap['react'], to: 'js/vendor/react.[hash:10].js' },
{ from: copyMap['react-dom'], to: 'js/vendor/react-dom.[hash:10].js' },
{ from: copyMap['react-redux'], to: 'js/vendor/react-redux.[hash:10].js' },
{ from: copyMap['redux'], to: 'js/vendor/redux.[hash:10].js' },
{ from: copyMap['axios'], to: 'js/vendor/axios.[hash:10].js' },
{ from: copyMap['react-modal'], to: 'js/vendor/react-modal.[hash:10].js' },
{ from: copyMap['cap-web-components'], to: 'js/cap-web-components.[hash:10].js' },
{ from: path.join(__dirname, "./assets/img"), to: './img/'}
], {
context: path.join(__dirname, "./node_modules")
}),
new ExtractTextPlugin({
filename: 'css/[name].[hash].css'
}),
new ManifestPlugin({
fileName: 'rev-manifest.json',
map(file) {
// https://github.com/webpack-contrib/copy-webpack-plugin/issues/104
// We need to do this until copy-webpack-plugin supports webpack hashing
file.name = file.name.replace(/\.[a-f0-9]{10}\./, '.');
return file;
}
})
],
watchOptions: {
poll: 1000,
aggregateTimeout: 1000
}
}]
// Add on NodemonPlugin if in watch mode
if (mode === 'development' && options.watch) {
webpackConfig[1].plugins.push(new NodemonPlugin({
legacyWatch: true,
watch: path.resolve('./app'),
script: './server.js',
verbose: true,
}))
}
// Only do S3 upload on production
if (mode === 'production') {
webpackConfig[1].plugins.push(new S3Plugin({
directory: path.resolve('./web/assets'),
s3UploadOptions: {
Bucket: config.get('s3.bucket'),
CacheControl: config.get('s3.cacheControl')
},
basePath: 'playspace'
}))
}
return webpackConfig;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.