mirror of
https://github.com/abhijithvijayan/web-extension-starter.git
synced 2025-10-07 07:22:37 +02:00
chore: minor linting to webpack config
This commit is contained in:
abhijithvijayan
parent
2d510b8f30
commit
18fa5f9ed9
@ -4,7 +4,7 @@ const ZipPlugin = require('zip-webpack-plugin');
|
|||||||
const TerserPlugin = require('terser-webpack-plugin');
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
const HtmlWebpackPlugin = require('html-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 ExtensionReloader = require('webpack-extension-reloader');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const WextManifestWebpackPlugin = require('wext-manifest-webpack-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 targetBrowser = process.env.TARGET_BROWSER;
|
||||||
|
|
||||||
const extensionReloaderPlugin =
|
const extensionReloaderPlugin =
|
||||||
nodeEnv === 'development'
|
nodeEnv === 'development'
|
||||||
? new ExtensionReloader({
|
? new ExtensionReloader({
|
||||||
port: 9090,
|
port: 9090,
|
||||||
reloadPage: true,
|
reloadPage: true,
|
||||||
entries: {
|
entries: {
|
||||||
// TODO: reload manifest on update
|
// TODO: reload manifest on update
|
||||||
contentScript: 'contentScript',
|
contentScript: 'contentScript',
|
||||||
background: 'background',
|
background: 'background',
|
||||||
extensionPage: ['popup', 'options'],
|
extensionPage: ['popup', 'options'],
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
: () => {
|
: () => {
|
||||||
this.apply = () => {};
|
this.apply = () => {};
|
||||||
};
|
};
|
||||||
|
|
||||||
const getExtensionFileType = (browser) => {
|
const getExtensionFileType = (browser) => {
|
||||||
if (browser === 'opera') {
|
if (browser === 'opera') {
|
||||||
return 'crx';
|
return 'crx';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (browser === 'firefox') {
|
if (browser === 'firefox') {
|
||||||
return 'xpi';
|
return 'xpi';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'zip';
|
return 'zip';
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
mode: nodeEnv,
|
mode: nodeEnv,
|
||||||
|
|
||||||
entry: {
|
entry: {
|
||||||
manifest: path.join(sourcePath, 'manifest.json'),
|
manifest: path.join(sourcePath, 'manifest.json'),
|
||||||
background: path.join(sourcePath, 'Background', 'index.ts'),
|
background: path.join(sourcePath, 'Background', 'index.ts'),
|
||||||
contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
|
contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
|
||||||
popup: path.join(sourcePath, 'Popup', 'index.tsx'),
|
popup: path.join(sourcePath, 'Popup', 'index.tsx'),
|
||||||
options: path.join(sourcePath, 'Options', '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: {
|
module: {
|
||||||
path: path.join(destPath, targetBrowser),
|
rules: [
|
||||||
filename: 'js/[name].bundle.js',
|
{
|
||||||
},
|
type: 'javascript/auto', // prevent webpack handling json with its own loaders,
|
||||||
|
test: /manifest\.json$/,
|
||||||
resolve: {
|
use: {
|
||||||
extensions: ['.ts', '.tsx', '.js', '.json'],
|
loader: 'wext-manifest-loader',
|
||||||
alias: {
|
options: {
|
||||||
'webextension-polyfill-ts': path.resolve(path.join(__dirname, 'node_modules', 'webextension-polyfill-ts')),
|
usePackageJSONVersion: true, // set to false to not use package.json version for manifest
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
module: {
|
{
|
||||||
rules: [
|
test: /\.(js|ts)x?$/,
|
||||||
{
|
loader: 'babel-loader',
|
||||||
type: 'javascript/auto', // prevent webpack handling json with its own loaders,
|
exclude: /node_modules/,
|
||||||
test: /manifest\.json$/,
|
},
|
||||||
use: {
|
{
|
||||||
loader: 'wext-manifest-loader',
|
test: /\.(sa|sc|c)ss$/,
|
||||||
options: {
|
use: [
|
||||||
usePackageJSONVersion: true, // set to false to not use package.json version for manifest
|
{
|
||||||
},
|
loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS
|
||||||
},
|
},
|
||||||
exclude: /node_modules/,
|
{
|
||||||
|
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',
|
loader: 'postcss-loader', // For autoprefixer
|
||||||
exclude: /node_modules/,
|
options: {
|
||||||
},
|
ident: 'postcss',
|
||||||
{
|
// eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
|
||||||
test: /\.(sa|sc|c)ss$/,
|
plugins: [require('autoprefixer')()],
|
||||||
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
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
'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: {
|
plugins: [
|
||||||
minimizer: [
|
// Plugin to not generate js bundle for manifest entry
|
||||||
new TerserPlugin({
|
new WextManifestWebpackPlugin(),
|
||||||
cache: true,
|
new ForkTsCheckerWebpackPlugin(),
|
||||||
parallel: true,
|
// environmental variables
|
||||||
terserOptions: {
|
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
|
||||||
output: {
|
// delete previous build files
|
||||||
comments: false,
|
new CleanWebpackPlugin({
|
||||||
},
|
cleanOnceBeforeBuildPatterns: [
|
||||||
},
|
path.join(process.cwd(), `extension/${targetBrowser}`),
|
||||||
extractComments: false,
|
path.join(
|
||||||
}),
|
process.cwd(),
|
||||||
new OptimizeCSSAssetsPlugin({
|
`extension/${targetBrowser}.${getExtensionFileType(targetBrowser)}`
|
||||||
cssProcessorPluginOptions: {
|
),
|
||||||
preset: ['default', { discardComments: { removeAll: true } }],
|
],
|
||||||
},
|
cleanStaleWebpackAssets: false,
|
||||||
}),
|
verbose: true,
|
||||||
new ZipPlugin({
|
}),
|
||||||
path: destPath,
|
new HtmlWebpackPlugin({
|
||||||
extension: `${getExtensionFileType(targetBrowser)}`,
|
template: path.join(viewsPath, 'popup.html'),
|
||||||
filename: `${targetBrowser}`,
|
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}`,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user