Nattily Polished Marbles

    @epinova/webpack

    1.4.2 • Public • Published

    @epinova/webpack

    Default Webpack configuration for Epinova Webpack projects

    Table of Contents

    1. Usage
    2. HTTPS
    3. Examples
    4. Upgrade

    Usage

    webpack.config.js

    const epinovaWebpackConfig = require('@epinova/webpack');
    
    const config = epinovaWebpackConfig({}, (config) => {
        config.entry = './Scripts/global/index.js';
    
        return config;
    });
    
    module.exports = config;

    Advanced

    const epinovaWebpackConfig = require('@epinova/webpack');
    
    const config = epinovaWebpackConfig({
        path: 'public',
        devServerPort: 9000
    }, (config, env, argv) => {
        config.entry = './Scripts/global/index.js';
    
        if(argv.mode === 'development') {
            ...
        }
    
        return config;
    });
    
    module.exports = config;

    TypeScript

    const path = require('path');
    
    const epinovaWebpackConfig = require('@epinova/webpack');
    const addTypeScript = require('@epinova/webpack/typescript');
    
    module.exports = epinovaWebpackConfig(
        { path: 'wwwroot/dist', publicPath: '/dist/', https: true },
        (config, env, argv) => {
            config.name = 'Client';
    
            config.entry = './Scripts/global/index.js';
    
            addTypeScript(config, {
                configFile: path.resolve(__dirname, 'tsconfig.json'),
            });
    
            return config;
        }
    );

    Dynamic Bundling

    This will automatically add all files that ends with .bundle.json as entries to the webpack config so that you don't have to manually update entries for each new bundle. The second argument to the addDynamicBundles will define which folders to scan for these bundle json files.

    const path = require('path');
    
    const epinovaWebpackConfig = require('@epinova/webpack');
    const addDynamicBundles = require('@epinova/webpack/dynamic-bundles');
    
    module.exports = epinovaWebpackConfig(
        { path: 'wwwroot/dist', publicPath: '/dist/', https: true },
        (config, env, argv) => {
            config.name = 'Client';
    
            config.entry = './Scripts/global/index.js';
    
            addDynamicBundles(config, [
                path.resolve(__dirname, 'Features'),
                path.resolve(__dirname, 'UI'),
            ]);
    
            return config;
        }
    );

    HTTPS

    Using webpack-dev-server with https is now possible, to activate https you need to pass https: true to the epinova config.

    const config = epinovaWebpackConfig({ https: true }, config => {
        ...
    
        return config;
    });

    Browser issues

    Chrome

    To be able to use webpack-dev-server and https in Chrome you will have to input chrome://flags/ in the url field and on that page search for localhost and find the experiment called "Allow invalid certificates for resources loaded from localhost." and set that experiment to Enable.

    This will prevent the Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID errors that you may see in the Chrome Console and will also allow you to not have to accept/sign webpack-dev-servers self signed certificate.

    Screenshot

    Firefox

    For Firefox you need to open the console and check for lines such as Error loading script "https://127.0.0.1/dist/global.js" and click the link to the JavaScript file. Firefox will then show you an alert page which says the certificate is not safe, you can then click "Advanced" and accept the certificate anyways.

    Examples

    GlobbedEntriesPlugin

    npm i --save globbed-webpack-entries-plugin

    const epinovaWebpackConfig = require('@epinova/webpack');
    const GlobbedEntriesPlugin = require('globbed-webpack-entries-plugin');
    
    const config = epinovaWebpackConfig({}, (config) => {
        config.entry = GlobbedEntriesPlugin.entries({
            global: ['./Scripts/global/**/*.js', './Styles/global/**/*.scss'],
        });
    
        config.plugins.push(new GlobbedEntriesPlugin());
    
        return config;
    });
    
    module.exports = config;

    Vue

    npm i --save vue vue-loader vue-template-compiler

    const epinovaWebpackConfig = require('@epinova/webpack');
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    const config = epinovaWebpackConfig({}, config => {
        ...
    
        config.module.rules.push({
            test: /\.vue$/,
            loader: 'vue-loader'
        });
    
        config.plugins.push(new VueLoaderPlugin());
    
        return config;
    });
    
    module.exports = config;

    Browserstack

    Browserstack does not like localhost url's so it is possible to start this config with a --browserstack argument. Example package.json script:

    {
        "test:browserstack": "webpack-dev-server --mode development --hot --hot-only --browserstack=http://bs-local.com",
    }

    Upgrade

    Upgrade from v1.3

    In v1.4 the default values for optimization.splitChunks.chunks & optimization.runtimeChunk has been updated to work better with async modules, if these new settings don't work for your project you can change them back to how they were in v1.3

    const epinovaWebpackConfig = require('@epinova/webpack');
    
    const config = epinovaWebpackConfig({}, (config) => {
        ...
        config.optimization.splitChunks.chunks = 'initial';
        config.optimization.runtimeChunk = false;
        ...
    
        return config;
    });
    
    module.exports = config;

    Upgrade from v1.1

    Update Epinova.Webpack nuget

    This update changes the format of the manifest.json file that the Epinova.Webpack nuget reads to output correct link and script tags to your CSS and script files.

    This nuget requires update and has also been split into two new nugets, one for .NET 4 and one for .NET 5. The README file in the repository will guide you to the correct version to use.

    Node version 12+ is now required

    It is worth noting that @epinova/webpack v1.3.0+ requires Node 12 or newer so you will need to update your system and potentially any build agents to use Node 12+. (It is recommended to switch to the current LTS version, which is currently Node 14)

    Babel

    You will most likely get errors like Module not found: Error: Can't resolve 'core-js/modules/es6.array.filter.js' when updating from older versions, to fix this we need to update the babel configuration.

    In the package.json file change this section

    "babel": {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "useBuiltIns": "usage"
                }
            ]
        ]
    }

    to

    "babel": {
        "presets": ["@babel/preset-env"]
    },

    Keywords

    none

    Install

    npm i @epinova/webpack

    DownloadsWeekly Downloads

    228

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    31.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • brymo
    • wezz
    • nettsentrisk
    • marvanitidis
    • heinzmuller