mirror of
https://github.com/grafana/grafana.git
synced 2025-07-28 04:42:13 +08:00
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:
@ -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
|
||||
// })
|
||||
|
Reference in New Issue
Block a user