opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-28 11:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split webpack dev config into dev and hot

Browse Source 
Motivation:

* too many conditionals for config, better to be explicit
* different priorities: faster build for hot mode
* working SCSS sources for styles in hot mode

The biggest differences:

* removed linter from TS loader in hot (should be editor or precommit
 or responsibility)
* simplified styles loading
* hot needs more extensions to resolve
* removed commons chunking for hot
* removed devServer from dev

Reduced HMR time from 8s to 4s on my machine.
This commit is contained in:
David Kaltschmidt
2018-05-28 13:49:15 +02:00
parent 5a96863eed
commit ebe8e62bd5
3 changed files with 106 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
scripts/webpack/webpack.dev.js
View File

@ -5,61 +5,29 @@ const common = require('./webpack.common.js');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TARGET = process.env.npm_lifecycle_event;
const HOT = TARGET === 'start';
const extractSass = new ExtractTextPlugin({
filename: "grafana.[name].css",
disable: HOT
filename: "grafana.[name].css"
});
const entries = HOT ? {
app: [
'webpack-dev-server/client?http://localhost:3333',
'./public/app/dev.ts',
],
vendor: require('./dependencies'),
} : {
app: './public/app/index.ts',
dark: './public/sass/grafana.dark.scss',
light: './public/sass/grafana.light.scss',
vendor: require('./dependencies'),
};
const output = HOT ? {
path: path.resolve(__dirname, '../../public/build'),
filename: '[name].[hash].js',
publicPath: "/public/build/",
} : {
path: path.resolve(__dirname, '../../public/build'),
filename: '[name].[hash].js',
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: "public/build/",
};
module.exports = merge(common, {
devtool: "cheap-module-source-map",
entry: entries,
output: output,
resolve: {
extensions: ['.scss', '.ts', '.tsx', '.es6', '.js', '.json', '.svg', '.woff2', '.png'],
entry: {
app: './public/app/index.ts',
dark: './public/sass/grafana.dark.scss',
light: './public/sass/grafana.light.scss',
vendor: require('./dependencies'),
},
devServer: {
publicPath: '/public/build/',
hot: HOT,
port: 3333,
proxy: {
'!/public/build': 'http://localhost:3000'
}
output: {
path: path.resolve(__dirname, '../../public/build'),
filename: '[name].[hash].js',
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: "public/build/",
},
module: {
@ -83,33 +51,16 @@ module.exports = merge(common, {
loader: 'awesome-typescript-loader',
options: {
useCache: true,
useBabel: HOT,
babelOptions: {
babelrc: false,
plugins: [
'syntax-dynamic-import',
'react-hot-loader/babel'
]
}
},
}
},
require('./sass.rule.js')({
sourceMap: true, minimize: false, preserveUrl: HOT
sourceMap: true, minimize: false, preserveUrl: false
}, extractSass),
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
]
},
@ -121,13 +72,10 @@ module.exports = merge(common, {
template: path.resolve(__dirname, '../../public/views/index.template.html'),
inject: 'body',
chunks: ['manifest', 'vendor', 'app'],
alwaysWriteToDisk: HOT
}),
new HtmlWebpackHarddiskPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
'process.env': {
'NODE_ENV': JSON.stringify('development')
}