0.0.4 • Published 6 years ago
webpack-assembler-react v0.0.4
webpack-assembler-react
An extension to webpack-assembler with parts specific to React + JavaScript + CSS applications
Used as an extension to webpack-assembler
Example
var path = require('path')
const {assemble, parts} = require('webpack-assembler')
parts.assign(require('webpack-assembler-react'))
const ROOT_DIR = __dirname
const SRC_DIR = exports.SRC_DIR = path.resolve(ROOT_DIR, './src')
const BUILD_DIR = exports.DIST_DIR = path.resolve(ROOT_DIR, './build')
const genBase = (env) => [
// Env
parts.env({
NODE_ENV: (env && env.production) ? 'production' : 'development',
DEBUG: !env || !env.production
}),
parts.circularDependency(),
// Use
parts.useReact(),
// Page hosted entry
parts.page({
entry: {
app: SRC_DIR + '/index'
},
template: SRC_DIR + '/index.html'
}),
// Handle extracted bundles.
parts.split([
// Extract remaining vendor bundles.
{
name: 'vendor',
minChunks: parts.isVendor
},
// Extract the webpack manifest.
// This changes with every build.
{
name: 'runtime',
minChunks: Infinity,
}
]), // extractBundles
]
const genDev = () => [
// Output
parts.output({
output: {
path: BUILD_DIR + '/dev',
filename: '[name].bundle.js'
},
clean: true
}),
{
devtool: 'eval-source-map',
devServer: {
inline: true,
contentBase: 'src',
port: '3001'
}
},
// load CSS instead of extracting it.
parts.useCSS()
]
const genProd = () => [
// Output
parts.output({
output: {
path: BUILD_DIR + '/prod',
filename: '[name].bundle.[chunkhash].js'
},
clean: true
}),
{
devtool: false,
},
// Extract and minify.
parts.extractCSS(),
parts.minifyJS(),
parts.minifyCSS()
]
module.exports = assemble(genBase, genDev, genProd)