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
This commit is contained in:
Torkel Ödegaard
2018-06-26 01:28:37 -07:00
committed by GitHub
parent f83306bb5b
commit 713a87fb5b
11 changed files with 2411 additions and 1024 deletions

View File

@ -7,20 +7,17 @@ const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const extractSass = new ExtractTextPlugin({
filename: "grafana.[name].css"
});
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',
vendor: require('./dependencies'),
},
output: {
@ -48,15 +45,13 @@ module.exports = merge(common, {
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'awesome-typescript-loader',
loader: 'ts-loader',
options: {
useCache: true,
transpileOnly: true
},
}
},
},
require('./sass.rule.js')({
sourceMap: true, minimize: false, preserveUrl: false
}, extractSass),
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'
@ -64,9 +59,30 @@ module.exports = merge(common, {
]
},
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 }),
extractSass,
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'),
@ -80,9 +96,6 @@ module.exports = merge(common, {
'NODE_ENV': JSON.stringify('development')
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
}),
// new BundleAnalyzerPlugin({
// analyzerPort: 8889
// })