webpack.config.js

var webpack = require('webpack'),
    path = require('path'),
    fileSystem = require('fs-extra'),
    env = require('./utils/env'),
    { CleanWebpackPlugin } = require('clean-webpack-plugin'),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    TerserPlugin = require('terser-webpack-plugin');

const ASSET_PATH = process.env.ASSET_PATH || '/';

var alias = {
    'react-dom': '@hot-loader/react-dom',
};

// load the secrets
var secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');

var fileExtensions = [
    'jpg',
    'jpeg',
    'png',
    'gif',
    'eot',
    'otf',
    'svg',
    'ttf',
    'woff',
    'woff2',
];

if (fileSystem.existsSync(secretsPath)) {
    alias['secrets'] = secretsPath;
}

var options = {
    mode: process.env.NODE_ENV || 'development',
    entry: {
	background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
        contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.jsx')
    },
    chromeExtensionBoilerplate: {
        notHotReload: ['contentScript'],
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].bundle.js',
        publicPath: ASSET_PATH,
    },
    module: {
        rules: [
            {
		test: /\.css$/i,
		use: [
		    "style-loader",
		    "css-loader",
		    {
			loader: "postcss-loader",
			options: {
			    postcssOptions: {
				plugins: [
				    [
					"postcss-preset-env",
					{
					    // Options
					},
				    ],
				],
			    },
			},
		    }
		]
            // look for .css or .scss files
		/* test: /\.(css|scss)$/, */
            // in the `src` directory
		/* use: ["style-loader", "css-loader", "postcss-loader"], */
            /* use: [
	     *     {
	     *         loader: 'style-loader',
	     *     },
	     *     {
	     *         loader: 'css-loader',
	     *     },
	     *     {
	     *         loader: 'sass-loader',
	     *         options: {
	     *             sourceMap: true,
	     *         },
	     *     },
	       'postcss-loader'
	     * ], */
            },
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            },
            
            {
                test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                },
                exclude: /node_modules/,
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                exclude: /node_modules/,
            },
            { test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ },
            {
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'source-map-loader',
                    },
                    {
                        loader: 'babel-loader',
                    },
                ],
                exclude: /node_modules/,
            }

        ],
    },
    resolve: {
        alias: alias,
        fullySpecified: false,
        extensions: fileExtensions
            .map((extension) => '.' + extension)
            .concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
    },
    plugins: [
        new webpack.ProgressPlugin(),
	
        // clean the build folder
        new CleanWebpackPlugin({
            verbose: true,
            cleanStaleWebpackAssets: true,
        }),
        // expose and write the allowed env vars on the compiled bundle
        new webpack.EnvironmentPlugin(['NODE_ENV']),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/manifest.json',
                    to: path.join(__dirname, 'build'),
                    force: true,
                    transform: function (content, path) {
                        // generates the manifest file using the package.json informations
                        return Buffer.from(
                            JSON.stringify({
                                description: process.env.npm_package_description,
                                version: process.env.npm_package_version,
                                ...JSON.parse(content.toString()),
                            })
                        );
                    },
                },
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/pages/page_script.js',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),	
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'node_modules/codemirror/lib/codemirror.css',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
	new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'node_modules/codemirror/theme/material.css',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
	}),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/img/icon-16.png',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
	new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/img/icon-48.png',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
	new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/img/icon-128.png',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/img/icon-128.png',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/cache.json',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
	new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/assets/cache_cn.json',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: 'src/pages/Content/content.styles.css',
                    to: path.join(__dirname, 'build'),
                    force: true,
                },
            ],
        }),
       
    ],
    infrastructureLogging: {
        level: 'info',
    },
};

if (env.NODE_ENV === 'development') {
    options.devtool = 'eval-cheap-module-source-map';
} else {
    options.optimization = {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
            }),
        ],
    };
}

module.exports = options;