grafana/scripts/webpack/webpack.dev.js
Torkel Ödegaard 713a87fb5b
Webpack 4 (WIP) (#12098)
* Webpack 4

* webpack: force angular version 1.6 as 1.7 has removed a legacy feature toggle Grafana needs, switched from awesome-typescript-loader to ts-loader & forked ts checker

* Webpack 4

* webpack: force angular version 1.6 as 1.7 has removed a legacy feature toggle Grafana needs, switched from awesome-typescript-loader to ts-loader & forked ts checker

* upgrade ts loader

* simplified splitChunks

* upgrade circle node image to v8

* webpack: minor changes, using the new mode option, removed unused awesome-typescript loader, investigating karma issue but no solution yet

* fix: change angular mocks version restriction to be more strict

* add babel-loader for HMR support, fix karma debug runner

* babel-loader to yarn.lock

* webpack: changed from ExtractTextPlugin  to MiniCssExtractPlugin, and updated the minification step to use new webpack4 optimization config section

* webpack: remove css minifcation from general css processing as it's done in the webpack optimization step

* limit vendors chunk to .ts and .js files

* fix: removed typescript compile error, wanted to see if we still got test failure for that

* tech: upgrade uglify-js, should be faster now
2018-06-26 01:28:37 -07:00

104 lines
2.6 KiB
JavaScript

'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 ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = merge(common, {
devtool: "cheap-module-source-map",
mode: 'development',
entry: {
app: './public/app/index.ts',
dark: './public/sass/grafana.dark.scss',
light: './public/sass/grafana.light.scss',
},
output: {
path: path.resolve(__dirname, '../../public/build'),
filename: '[name].[hash].js',
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: "public/build/",
},
module: {
rules: [
{
test: /\.tsx?$/,
enforce: 'pre',
exclude: /node_modules/,
use: {
loader: 'tslint-loader',
options: {
emitErrors: true,
typeCheck: false,
}
}
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
},
},
},
require('./sass.rule.js')({ sourceMap: false, minimize: false, preserveUrl: false }),
{
test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader'
},
]
},
optimization: {
splitChunks: {
cacheGroups: {
manifest: {
chunks: "initial",
test: "vendor",
name: "vendor",
enforce: true
},
vendor: {
chunks: "initial",
test: "vendor",
name: "vendor",
enforce: true
}
}
}
},
plugins: [
new CleanWebpackPlugin('../../public/build', { allowExternal: true }),
new MiniCssExtractPlugin({
filename: "grafana.[name].css"
}),
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../../public/views/index.html'),
template: path.resolve(__dirname, '../../public/views/index.template.html'),
inject: 'body',
chunks: ['manifest', 'vendor', 'app'],
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
// new BundleAnalyzerPlugin({
// analyzerPort: 8889
// })
]
});