accessibility-insights-web/webpack.config.js

113 строки
3.5 KiB
JavaScript

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const nodeExternals = require('webpack-node-externals');
const commonPlugins = [
new ForkTsCheckerWebpackPlugin(),
new CaseSensitivePathsPlugin(),
new MiniCssExtractPlugin({
// Similar to the same options in webpackOptions.output
filename: '[name].css',
chunkFilename: '[id].css',
}),
];
const commonEntryFiles = {
injected: [path.resolve(__dirname, 'src/injected/client-init.ts')],
popup: [path.resolve(__dirname, 'src/popup/popup-init.ts')],
insights: [path.resolve(__dirname, 'src/views/insights/initializer.ts')],
detailsView: [path.resolve(__dirname, 'src/DetailsView/details-view-initializer.ts')],
devtools: [path.resolve(__dirname, 'src/Devtools/dev-tool-init.ts')],
serviceWorker: [path.resolve(__dirname, 'src/background/service-worker-init.ts')],
debugTools: path.resolve(__dirname, 'src/debug-tools/initializer/debug-tools-init.tsx'),
};
const tsRule = {
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
},
},
],
exclude: ['/node_modules/'],
};
const scssRule = (useHash = true) => ({
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
},
},
{
loader: 'css-loader',
options: {
esModule: true,
modules: {
localIdentName: '[local]' + (useHash ? '--[hash:base64:5]' : ''),
exportLocalsConvention: 'camelCaseOnly',
},
},
},
'sass-loader',
],
});
const commonConfig = {
entry: commonEntryFiles,
module: {
rules: [tsRule, scssRule(true)],
},
resolve: {
// It is important that src is absolute but node_modules is relative. See #2520
modules: [path.resolve(__dirname, './src'), 'node_modules'],
// We only directly use .tsx and .ts, but some of our transitive dependencies directly
// require .js or .json files
extensions: ['.tsx', '.ts', '.js', '.json'],
},
plugins: commonPlugins,
performance: {
// We allow higher-than-normal sizes because our users only have to do local fetches of our bundles
maxEntrypointSize: 10 * 1024 * 1024,
maxAssetSize: 10 * 1024 * 1024,
},
stats: {
// This is to suppress noise from mini-css-extract-plugin
children: false,
},
};
const packageUIConfig = {
entry: {
ui: [path.resolve(__dirname, 'src/packages/accessibility-insights-ui/index.ts')],
},
module: { rules: [tsRule, scssRule(false)] },
externals: [nodeExternals()],
plugins: commonPlugins,
resolve: commonConfig.resolve,
name: 'package-ui',
mode: 'development',
devtool: false,
output: {
path: path.join(__dirname, 'packages/ui/bundle'),
filename: '[name].bundle.js',
pathinfo: false,
library: '[name]',
libraryTarget: 'umd',
},
target: 'node',
};
// For just one config, use "webpack --config-name package-ui", etc
module.exports = [packageUIConfig];