mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-09-02 03:32:36 +02:00
Set up webpack configuration for building examples (#1642)
* Set up webpack configuration for building examples * Configure react-hot-loader in development * Improve config, set gh-pages to use examples/dist directory * PR feedback * Rename App.js in git
This commit is contained in:
Zach Schneider
committed by
Ian Storm Taylor
Ian Storm Taylor
parent
670ef391a8
commit
2ebf3b462b
@@ -1,104 +0,0 @@
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import builtins from 'rollup-plugin-node-builtins'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import globals from 'rollup-plugin-node-globals'
|
||||
import json from 'rollup-plugin-json'
|
||||
import replace from 'rollup-plugin-replace'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import sourcemaps from 'rollup-plugin-sourcemaps'
|
||||
import uglify from 'rollup-plugin-uglify'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
/**
|
||||
* Return a Rollup configuration for the examples with `env`.
|
||||
*
|
||||
* @param {String} env
|
||||
* @return {Object}
|
||||
*/
|
||||
|
||||
function configure(env) {
|
||||
const isDev = env === 'development'
|
||||
const isProd = env === 'production'
|
||||
|
||||
return {
|
||||
input: 'examples/index.js',
|
||||
output: {
|
||||
file: isProd ? pkg.umdMin : pkg.umd,
|
||||
name: 'slate-examples',
|
||||
format: 'umd',
|
||||
exports: 'named',
|
||||
sourcemap: isDev ? 'inline' : false,
|
||||
},
|
||||
watch: {
|
||||
include: ['examples/**', 'packages/*/lib/*.es.js'],
|
||||
},
|
||||
plugins: [
|
||||
// Allow Rollup to resolve modules from `node_modules`, since it only
|
||||
// resolves local modules by default.
|
||||
resolve({
|
||||
browser: true,
|
||||
preferBuiltins: true,
|
||||
}),
|
||||
|
||||
// Allow Rollup to resolve CommonJS modules, since it only resolves ES2015
|
||||
// modules by default.
|
||||
commonjs({
|
||||
exclude: ['examples/**'],
|
||||
// HACK: Sometimes the CommonJS plugin can't identify named exports, so
|
||||
// we have to manually specify named exports here for them to work.
|
||||
// https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
|
||||
namedExports: {
|
||||
esrever: ['reverse'],
|
||||
immutable: [
|
||||
'List',
|
||||
'Map',
|
||||
'Record',
|
||||
'OrderedSet',
|
||||
'Set',
|
||||
'Stack',
|
||||
'is',
|
||||
],
|
||||
'react-dom': ['findDOMNode'],
|
||||
'react-dom/server': ['renderToStaticMarkup'],
|
||||
},
|
||||
}),
|
||||
|
||||
// Convert JSON imports to ES6 modules.
|
||||
json(),
|
||||
|
||||
// Replace `process.env.NODE_ENV` with its value, which enables some
|
||||
// modules like React and Slate to use their production variant.
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify(env),
|
||||
}),
|
||||
|
||||
// Register Node.js builtins for browserify compatibility.
|
||||
builtins(),
|
||||
|
||||
// Use Babel to transpile the result, limiting it to the source code.
|
||||
babel({
|
||||
include: ['examples/**'],
|
||||
}),
|
||||
|
||||
// Register Node.js globals for browserify compatibility.
|
||||
globals(),
|
||||
|
||||
// Only minify the output in production, since it is very slow.
|
||||
isProd && uglify(),
|
||||
|
||||
// Only parse sourcemaps of dependencies in development.
|
||||
isDev && sourcemaps(),
|
||||
].filter(Boolean),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Export.
|
||||
*
|
||||
* @type {Array}
|
||||
*/
|
||||
|
||||
export default [
|
||||
configure('development'),
|
||||
process.env.NODE_ENV === 'production' && configure('production'),
|
||||
].filter(Boolean)
|
||||
82
support/webpack.config.js
Normal file
82
support/webpack.config.js
Normal file
@@ -0,0 +1,82 @@
|
||||
const path = require('path')
|
||||
const webpack = require('webpack')
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const HtmlWebpackTemplate = require('html-webpack-template')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
|
||||
|
||||
const config = {
|
||||
entry: ['react-hot-loader/patch', './examples/index.js'],
|
||||
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'examples/dist'),
|
||||
filename: '[name].[hash].js',
|
||||
},
|
||||
|
||||
devServer: {
|
||||
contentBase: './examples',
|
||||
publicPath: '/',
|
||||
hot: true,
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js?$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
forceEnv: 'webpack',
|
||||
},
|
||||
},
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new ExtractTextPlugin('[name]-[contenthash].css'),
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'Slate',
|
||||
template: HtmlWebpackTemplate,
|
||||
inject: false,
|
||||
links: [
|
||||
'https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext',
|
||||
'https://fonts.googleapis.com/icon?family=Material+Icons',
|
||||
],
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
config.plugins.push(
|
||||
new CleanWebpackPlugin(['examples/dist']),
|
||||
new UglifyJSPlugin({ sourceMap: true }),
|
||||
new CopyWebpackPlugin(['examples/CNAME'])
|
||||
)
|
||||
config.devtool = 'source-map'
|
||||
} else {
|
||||
config.plugins.push(
|
||||
new webpack.NamedModulesPlugin(),
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
)
|
||||
config.devtool = 'inline-source-map'
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
Reference in New Issue
Block a user