WIP Making prod script to work
This commit is contained in:
Adolfo Panizo
parent
9d3f7af9ee
commit
eff91fc991
|
|
@ -0,0 +1,193 @@
|
|||
const autoprefixer = require('autoprefixer');
|
||||
const cssvars = require('postcss-simple-vars');
|
||||
const webpack = require('webpack');
|
||||
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const url = require('url');
|
||||
|
||||
var paths = require('./paths');
|
||||
var getClientEnvironment = require('./env');
|
||||
|
||||
var cssvariables = require(paths.appSrc + '/theme/variables');
|
||||
|
||||
const postcssPlugins = [
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
]
|
||||
}),
|
||||
cssvars({
|
||||
variables: function () {
|
||||
return Object.assign({}, cssvariables);
|
||||
},
|
||||
silent: true
|
||||
}),
|
||||
];
|
||||
|
||||
function ensureSlash(path, needsSlash) {
|
||||
var hasSlash = path.endsWith('/');
|
||||
if (hasSlash && !needsSlash) {
|
||||
return path.substr(path, path.length - 1);
|
||||
} else if (!hasSlash && needsSlash) {
|
||||
return path + '/';
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
// We use "homepage" field to infer "public path" at which the app is served.
|
||||
// Webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||
// We can't use a relative path in HTML because we don't want to load something
|
||||
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||
var homepagePath = require(paths.appPackageJson).homepage;
|
||||
var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
var publicPath = ensureSlash(homepagePathname, true);
|
||||
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||
var publicUrl = ensureSlash(homepagePathname, false);
|
||||
// Get environment variables to inject into our app.
|
||||
var env = getClientEnvironment(publicUrl);
|
||||
|
||||
// Assert this just to be safe.
|
||||
// Development builds of React are slow and not intended for production.
|
||||
if (env['process.env'].NODE_ENV !== '"production"') {
|
||||
throw new Error('Production builds must have NODE_ENV=production.');
|
||||
}
|
||||
|
||||
// This is the production configuration.
|
||||
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||
// The development configuration is different and lives in a separate file.
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
// Don't attempt to continue if there are any errors.
|
||||
bail: true,
|
||||
// We generate sourcemaps in production. This is slow but gives good results.
|
||||
// You can exclude the *.map files from the build during deployment.
|
||||
devtool: 'source-map',
|
||||
// In production, we only want to load the polyfills and the app code.
|
||||
entry: [
|
||||
"babel-polyfill",
|
||||
require.resolve('./polyfills'),
|
||||
paths.appIndexJs
|
||||
],
|
||||
output: {
|
||||
// The build folder.
|
||||
path: paths.appBuild,
|
||||
// Generated JS file names (with nested folders).
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// We don't currently advertise code splitting but Webpack supports it.
|
||||
filename: 'static/js/[name].[chunkhash:8].js',
|
||||
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
publicPath: publicPath
|
||||
},
|
||||
resolve: {
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||
extensions: ['.js', '.json', '.jsx'],
|
||||
alias: {
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
'react-native': 'react-native-web'
|
||||
}
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader"
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
modules: true,
|
||||
minimize: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
plugins: postcssPlugins,
|
||||
}
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
// JSON is not enabled by default in Webpack but both Node and Browserify
|
||||
// allow it implicitly so we also enable it.
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json-loader'
|
||||
},
|
||||
// "file" loader for svg
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'file-loader',
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
template: paths.appHtml,
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}),
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||
// It is absolutely essential that NODE_ENV was set to production here.
|
||||
// Otherwise React will be compiled in the very slow development mode.
|
||||
new webpack.DefinePlugin(env),
|
||||
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||
new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
|
||||
// Generate a manifest file which contains a mapping of all asset filenames
|
||||
// to their corresponding output file so that tools can pick it up without
|
||||
// having to parse `index.html`.
|
||||
new ManifestPlugin({
|
||||
fileName: 'asset-manifest.json'
|
||||
})
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty'
|
||||
}
|
||||
};
|
||||
|
|
@ -6119,6 +6119,29 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"extract-text-webpack-plugin": {
|
||||
"version": "4.0.0-beta.0",
|
||||
"resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz",
|
||||
"integrity": "sha512-Hypkn9jUTnFr0DpekNam53X47tXn3ucY08BQumv7kdGgeVUBLq3DJHJTi6HNxv4jl9W+Skxjz9+RnK0sJyqqjA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async": "2.6.0",
|
||||
"loader-utils": "1.1.0",
|
||||
"schema-utils": "0.4.5",
|
||||
"webpack-sources": "1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"async": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
|
||||
"integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"extsprintf": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
|
||||
|
|
@ -6198,6 +6221,16 @@
|
|||
"escape-string-regexp": "1.0.5"
|
||||
}
|
||||
},
|
||||
"file-loader": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
|
||||
"integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "1.1.0",
|
||||
"schema-utils": "0.4.5"
|
||||
}
|
||||
},
|
||||
"file-type": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
|
||||
|
|
@ -9381,6 +9414,12 @@
|
|||
"integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
|
||||
"dev": true
|
||||
},
|
||||
"json-loader": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
|
||||
"integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==",
|
||||
"dev": true
|
||||
},
|
||||
"json-schema": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
|
||||
|
|
@ -18268,6 +18307,31 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"webpack-manifest-plugin": {
|
||||
"version": "2.0.0-rc.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-2.0.0-rc.2.tgz",
|
||||
"integrity": "sha512-Qeq1YE+3ibb+sQbHyWnlxCtO1s3AsUtaPe2Gd4lJfVgWbgw9IwxUx6WvPPCzp7iWZed8bclPYrC7aS9VOzPAxw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fs-extra": "0.30.0",
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": {
|
||||
"version": "0.30.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
|
||||
"integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "4.1.11",
|
||||
"jsonfile": "2.4.0",
|
||||
"klaw": "1.3.1",
|
||||
"path-is-absolute": "1.0.1",
|
||||
"rimraf": "2.6.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-sources": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -35,8 +35,11 @@
|
|||
"css-loader": "^0.28.10",
|
||||
"detect-port": "^1.2.2",
|
||||
"dotenv": "^5.0.1",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"file-loader": "^1.1.11",
|
||||
"html-loader": "^0.5.5",
|
||||
"html-webpack-plugin": "^3.0.4",
|
||||
"json-loader": "^0.5.7",
|
||||
"postcss-loader": "^2.1.1",
|
||||
"postcss-simple-vars": "^4.1.0",
|
||||
"react": "^16.2.0",
|
||||
|
|
@ -47,7 +50,8 @@
|
|||
"truffle-solidity-loader": "0.0.8",
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-cli": "^2.0.8",
|
||||
"webpack-dev-server": "^3.1.0"
|
||||
"webpack-dev-server": "^3.1.0",
|
||||
"webpack-manifest-plugin": "^2.0.0-rc.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"final-form": "^4.2.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue