From 18fa5f9ed96b2fe0d42a2cdf285d00a27d157c00 Mon Sep 17 00:00:00 2001 From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com> Date: Fri, 17 Apr 2020 15:58:08 +0530 Subject: [PATCH] chore: minor linting to webpack config --- webpack.config.js | 283 +++++++++++++++++++++++----------------------- 1 file changed, 144 insertions(+), 139 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 9c24bfd..4a00946 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,7 +4,7 @@ const ZipPlugin = require('zip-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const ExtensionReloader = require('webpack-extension-reloader'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin'); @@ -18,158 +18,163 @@ const nodeEnv = process.env.NODE_ENV || 'development'; const targetBrowser = process.env.TARGET_BROWSER; const extensionReloaderPlugin = - nodeEnv === 'development' - ? new ExtensionReloader({ - port: 9090, - reloadPage: true, - entries: { - // TODO: reload manifest on update - contentScript: 'contentScript', - background: 'background', - extensionPage: ['popup', 'options'], - }, - }) - : () => { - this.apply = () => {}; - }; + nodeEnv === 'development' + ? new ExtensionReloader({ + port: 9090, + reloadPage: true, + entries: { + // TODO: reload manifest on update + contentScript: 'contentScript', + background: 'background', + extensionPage: ['popup', 'options'], + }, + }) + : () => { + this.apply = () => {}; + }; const getExtensionFileType = (browser) => { - if (browser === 'opera') { - return 'crx'; - } + if (browser === 'opera') { + return 'crx'; + } - if (browser === 'firefox') { - return 'xpi'; - } + if (browser === 'firefox') { + return 'xpi'; + } - return 'zip'; + return 'zip'; }; module.exports = { - mode: nodeEnv, + mode: nodeEnv, - entry: { - manifest: path.join(sourcePath, 'manifest.json'), - background: path.join(sourcePath, 'Background', 'index.ts'), - contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'), - popup: path.join(sourcePath, 'Popup', 'index.tsx'), - options: path.join(sourcePath, 'Options', 'index.tsx'), + entry: { + manifest: path.join(sourcePath, 'manifest.json'), + background: path.join(sourcePath, 'Background', 'index.ts'), + contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'), + popup: path.join(sourcePath, 'Popup', 'index.tsx'), + options: path.join(sourcePath, 'Options', 'index.tsx'), + }, + + output: { + path: path.join(destPath, targetBrowser), + filename: 'js/[name].bundle.js', + }, + + resolve: { + extensions: ['.ts', '.tsx', '.js', '.json'], + alias: { + 'webextension-polyfill-ts': path.resolve( + path.join(__dirname, 'node_modules', 'webextension-polyfill-ts') + ), }, + }, - output: { - path: path.join(destPath, targetBrowser), - filename: 'js/[name].bundle.js', - }, - - resolve: { - extensions: ['.ts', '.tsx', '.js', '.json'], - alias: { - 'webextension-polyfill-ts': path.resolve(path.join(__dirname, 'node_modules', 'webextension-polyfill-ts')), + module: { + rules: [ + { + type: 'javascript/auto', // prevent webpack handling json with its own loaders, + test: /manifest\.json$/, + use: { + loader: 'wext-manifest-loader', + options: { + usePackageJSONVersion: true, // set to false to not use package.json version for manifest + }, }, - }, - - module: { - rules: [ - { - type: 'javascript/auto', // prevent webpack handling json with its own loaders, - test: /manifest\.json$/, - use: { - loader: 'wext-manifest-loader', - options: { - usePackageJSONVersion: true, // set to false to not use package.json version for manifest - }, - }, - exclude: /node_modules/, + exclude: /node_modules/, + }, + { + test: /\.(js|ts)x?$/, + loader: 'babel-loader', + exclude: /node_modules/, + }, + { + test: /\.(sa|sc|c)ss$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS + }, + { + loader: 'css-loader', // Takes the CSS files and returns the CSS with imports and url(...) for Webpack + options: { + sourceMap: true, }, - { - test: /\.(js|ts)x?$/, - loader: 'babel-loader', - exclude: /node_modules/, - }, - { - test: /\.(sa|sc|c)ss$/, - use: [ - { - loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS - }, - { - loader: 'css-loader', // Takes the CSS files and returns the CSS with imports and url(...) for Webpack - options: { - sourceMap: true, - }, - }, - { - loader: 'postcss-loader', // For autoprefixer - options: { - ident: 'postcss', - // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires - plugins: [require('autoprefixer')()], - }, - }, - 'resolve-url-loader', // Rewrites relative paths in url() statements - 'sass-loader', // Takes the Sass/SCSS file and compiles to the CSS - ], + }, + { + loader: 'postcss-loader', // For autoprefixer + options: { + ident: 'postcss', + // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires + plugins: [require('autoprefixer')()], }, + }, + 'resolve-url-loader', // Rewrites relative paths in url() statements + 'sass-loader', // Takes the Sass/SCSS file and compiles to the CSS ], - }, - - plugins: [ - // Plugin to not generate js bundle for manifest entry - new WextManifestWebpackPlugin(), - new ForkTsCheckerWebpackPlugin(), - // environmental variables - new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']), - // delete previous build files - new CleanWebpackPlugin({ - cleanOnceBeforeBuildPatterns: [ - path.join(process.cwd(), `extension/${targetBrowser}`), - path.join(process.cwd(), `extension/${targetBrowser}.${getExtensionFileType(targetBrowser)}`), - ], - cleanStaleWebpackAssets: false, - verbose: true, - }), - new HtmlWebpackPlugin({ - template: path.join(viewsPath, 'popup.html'), - inject: 'body', - chunks: ['popup'], - filename: 'popup.html', - }), - new HtmlWebpackPlugin({ - template: path.join(viewsPath, 'options.html'), - inject: 'body', - chunks: ['options'], - filename: 'options.html', - }), - // write css file(s) to build folder - new MiniCssExtractPlugin({ filename: 'css/[name].css' }), - // copy static assets - new CopyWebpackPlugin([{ from: 'source/assets', to: 'assets' }]), - // plugin to enable browser reloading in development mode - extensionReloaderPlugin, + }, ], + }, - optimization: { - minimizer: [ - new TerserPlugin({ - cache: true, - parallel: true, - terserOptions: { - output: { - comments: false, - }, - }, - extractComments: false, - }), - new OptimizeCSSAssetsPlugin({ - cssProcessorPluginOptions: { - preset: ['default', { discardComments: { removeAll: true } }], - }, - }), - new ZipPlugin({ - path: destPath, - extension: `${getExtensionFileType(targetBrowser)}`, - filename: `${targetBrowser}`, - }), - ], - }, + plugins: [ + // Plugin to not generate js bundle for manifest entry + new WextManifestWebpackPlugin(), + new ForkTsCheckerWebpackPlugin(), + // environmental variables + new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']), + // delete previous build files + new CleanWebpackPlugin({ + cleanOnceBeforeBuildPatterns: [ + path.join(process.cwd(), `extension/${targetBrowser}`), + path.join( + process.cwd(), + `extension/${targetBrowser}.${getExtensionFileType(targetBrowser)}` + ), + ], + cleanStaleWebpackAssets: false, + verbose: true, + }), + new HtmlWebpackPlugin({ + template: path.join(viewsPath, 'popup.html'), + inject: 'body', + chunks: ['popup'], + filename: 'popup.html', + }), + new HtmlWebpackPlugin({ + template: path.join(viewsPath, 'options.html'), + inject: 'body', + chunks: ['options'], + filename: 'options.html', + }), + // write css file(s) to build folder + new MiniCssExtractPlugin({filename: 'css/[name].css'}), + // copy static assets + new CopyWebpackPlugin([{from: 'source/assets', to: 'assets'}]), + // plugin to enable browser reloading in development mode + extensionReloaderPlugin, + ], + + optimization: { + minimizer: [ + new TerserPlugin({ + cache: true, + parallel: true, + terserOptions: { + output: { + comments: false, + }, + }, + extractComments: false, + }), + new OptimizeCSSAssetsPlugin({ + cssProcessorPluginOptions: { + preset: ['default', {discardComments: {removeAll: true}}], + }, + }), + new ZipPlugin({ + path: destPath, + extension: `${getExtensionFileType(targetBrowser)}`, + filename: `${targetBrowser}`, + }), + ], + }, };