IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'davkal/split-webpack-config-hot'

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-05-28 14:18:35 +02:00
commit 7b09dfe9a0
3 changed files with 105 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -102,7 +102,7 @@
},
"scripts": {
"dev": "webpack --progress --colors --config scripts/webpack/webpack.dev.js",
"start": "webpack-dev-server --progress --colors --config scripts/webpack/webpack.dev.js",
"start": "webpack-dev-server --progress --colors --config scripts/webpack/webpack.hot.js",
"watch": "webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
"build": "grunt build",
"test": "grunt test",

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')
}

91
scripts/webpack/webpack.hot.js Normal file
View File

@ -0,0 +1,91 @@
'use strict';
const merge = require('webpack-merge');
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 CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = merge(common, {
entry: {
app: [
'webpack-dev-server/client?http://localhost:3333',
'./public/app/dev.ts',
],
},
output: {
path: path.resolve(__dirname, '../../public/build'),
filename: '[name].[hash].js',
publicPath: "/public/build/",
},
resolve: {
extensions: ['.scss', '.ts', '.tsx', '.es6', '.js', '.json', '.svg', '.woff2', '.png'],
},
devServer: {
publicPath: '/public/build/',
hot: true,
port: 3333,
proxy: {
'!/public/build': 'http://localhost:3000'
}
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'awesome-typescript-loader',
options: {
useCache: true,
useBabel: true,
babelOptions: {
babelrc: false,
plugins: [
'syntax-dynamic-import',
'react-hot-loader/babel'
]
}
},
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
},
{
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader'
},
]
},
plugins: [
new CleanWebpackPlugin('../public/build', { allowExternal: true }),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/index.html'),
template: path.resolve(__dirname, '../../public/views/index.template.html'),
inject: 'body',
alwaysWriteToDisk: true
}),
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')
}
}),
]
});