Cleanup the webpack config (#1417)

* Cleanup the webpack config

* Typo
This commit is contained in:
Paulus Schoutsen 2018-07-08 17:16:19 +02:00 committed by GitHub
parent b0f29744bf
commit 52f2c29726
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -25,7 +25,30 @@ function createConfig(isProdBuild, latestBuild) {
'custom-panel': './src/entrypoints/custom-panel.js',
};
const babelOptions = {
if (latestBuild) {
entry['hass-icons'] = './src/entrypoints/hass-icons.js';
entry['service-worker-hass'] = './src/entrypoints/service-worker-hass.js';
}
const chunkFilename = isProdBuild ?
'[chunkhash].chunk.js' : '[name].chunk.js';
return {
mode: isProdBuild ? 'production' : 'development',
devtool: isProdBuild ? 'source-map ' : 'inline-source-map',
entry,
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
!latestBuild && [
require('babel-preset-env').default, { modules: false }
],
].filter(Boolean),
plugins: [
// Only support the syntax, Webpack will handle it.
"syntax-dynamic-import",
@ -36,14 +59,21 @@ function createConfig(isProdBuild, latestBuild) {
}
],
],
};
const copyPluginOpts = [
// Leave here until Hass.io no longer references the ES5 build.
'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
];
const plugins = [
},
},
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
exportAsEs6Default: true,
}
}
}
]
},
plugins: [
new webpack.DefinePlugin({
__DEV__: JSON.stringify(!isProdBuild),
__BUILD__: JSON.stringify(latestBuild ? 'latest' : 'es5'),
@ -51,7 +81,19 @@ function createConfig(isProdBuild, latestBuild) {
__PUBLIC_PATH__: JSON.stringify(publicPath),
'process.env.NODE_ENV': JSON.stringify(isProdBuild ? 'production' : 'development'),
}),
new CopyWebpackPlugin(copyPluginOpts),
new CopyWebpackPlugin([
// Leave here until Hass.io no longer references the ES5 build.
'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
latestBuild && { from: 'public', to: '.' },
latestBuild && { from: 'build-translations/output', to: `translations` },
latestBuild && { from: 'node_modules/@polymer/font-roboto-local/fonts', to: 'fonts' },
latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map',
latestBuild && { from: 'node_modules/react-big-calendar/lib/css/react-big-calendar.css', to: 'panels/calendar/' },
latestBuild && { from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` },
latestBuild && { from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` },
!latestBuild && 'public/__init__.py',
].filter(Boolean)),
// Ignore moment.js locales
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Color.js is bloated, it contains all color definitions for all material color sets.
@ -64,36 +106,15 @@ function createConfig(isProdBuild, latestBuild) {
/@polymer\/font-roboto\/roboto\.js$/,
path.resolve(__dirname, 'src/util/empty.js')
),
];
if (latestBuild) {
copyPluginOpts.push({ from: 'public', to: '.' });
copyPluginOpts.push({ from: 'build-translations/output', to: `translations` });
copyPluginOpts.push({ from: 'node_modules/@polymer/font-roboto-local/fonts', to: 'fonts' });
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js')
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map')
copyPluginOpts.push({ from: 'node_modules/react-big-calendar/lib/css/react-big-calendar.css', to: `panels/calendar/` });
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` });
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` });
entry['hass-icons'] = './src/entrypoints/hass-icons.js';
entry['service-worker-hass'] = './src/entrypoints/service-worker-hass.js';
} else {
copyPluginOpts.push('public/__init__.py');
babelOptions.presets = [
[require('babel-preset-env').default, { modules: false }]
];
}
if (isProdBuild) {
plugins.push(new UglifyJsPlugin({
isProdBuild && new UglifyJsPlugin({
extractComments: true,
sourceMap: true,
uglifyOptions: {
// Disabling because it broke output
mangle: false,
}
}));
plugins.push(new CompressionPlugin({
}),
isProdBuild && new CompressionPlugin({
cache: true,
exclude: [
/\.js\.map$/,
@ -101,10 +122,8 @@ function createConfig(isProdBuild, latestBuild) {
/\.py$/,
/\.txt$/,
]
}));
}
plugins.push(new WorkboxPlugin.InjectManifest({
}),
new WorkboxPlugin.InjectManifest({
swSrc: './src/entrypoints/service-worker-bootstrap.js',
swDest: 'service_worker.js',
importWorkboxFrom: 'local',
@ -115,7 +134,7 @@ function createConfig(isProdBuild, latestBuild) {
/hass-icons.js$/,
/\.chunk\.js$/,
],
// Static assets get cached during runtime. But these we want to explicetely cache
// Static assets get cached during runtime. But these we want to explicitly cache
// Need to be done using templatedUrls because prefix is /static
globDirectory: '.',
globIgnores: [],
@ -142,36 +161,8 @@ function createConfig(isProdBuild, latestBuild) {
'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf'
],
}
}));
const chunkFilename = isProdBuild ?
'[chunkhash].chunk.js' : '[name].chunk.js';
return {
mode: isProdBuild ? 'production' : 'development',
devtool: isProdBuild ? 'source-map ' : 'inline-source-map',
entry,
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: babelOptions,
},
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
exportAsEs6Default: true,
}
}
}
]
},
plugins,
}),
].filter(Boolean),
output: {
filename: '[name].js',
chunkFilename: chunkFilename,