Skip to content

In lerna project, use exclude and include is not working. #955

Open
@FiShelly

Description

I'm submitting a bug report

Webpack Version:
5.x

Babel Core Version:
7.x

Babel Loader Version:
8.x

Please tell us about your environment:
OSX 10.x /

Current behavior:

When I use webpack with babel-loader, i get output code with require method or not transpile es6.

Expected/desired behavior:

get output code with es5 and not contain require method.

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.
// webpack.common.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const env = process.env;

module.exports = () => {
    return {
        entry: {index: './src/index.js'},
        stats: 'errors-warnings',
        resolve: {
            alias: {
                '@': path.resolve(process.cwd(), './src')
            },
            symlinks: false
        },
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: './public', to: '',
                        globOptions: {
                            ignore: '.DS_Store,.gitignore,.gitkeep,.git/**,**/.git/**'.split(',')
                        }
                    }
                ]
            }),
            ...[
                new HtmlWebpackPlugin({
                    filename: './/index.html',
                    template: './src/templates/index.ejs',
                    title: undefined,
                    chunks: [ 'style', 'chunk-vendors', 'chunk-common', 'index' ],
                    env: 'production',
                    minify: false
                })
            ]
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        name: 'chunk-vendors',
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        chunks: 'initial'
                    },
                    common: {
                        name: 'chunk-common',
                        minChunks: 2,
                        priority: -20,
                        chunks: 'initial',
                        reuseExistingChunk: true
                    },
                    styles: {
                        test: /[\\/]common[\\/].\.css$/,
                        name: 'style',
                        chunks: 'all',
                        enforce: true
                    }
                }
            },
            minimizer: [
                new TerserWebpackPlugin({
                    parallel: true,
                    extractComments: false,
                    terserOptions: {
                        ie8: false,
                        toplevel: true
                    }
                })
            ]
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    // exclude: /node_modules\/(?!(@lerna-demo\/common)\/).*/,    // A. contain required
                    exclude: /(node_modules|bower_components)/,     // B. container es6  code
                    include: /node_modules\/@lerna-demo.*/,       //  B. container es6  code
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        corejs: 3,
                                        useBuiltIns: 'usage',
                                    }
                                ]
                            ],
                            plugins: [
                                '@babel/plugin-transform-runtime',
                                '@babel/plugin-transform-modules-commonjs'
                            ]
                        }
                    }
                },
                {
                    test: /\.ejs/,
                    loader: 'ejs-loader',
                    options: {
                        variable: 'props',
                        esModule: false
                    }
                },

                {
                    test: /\.less$/,
                    use: [
                        env.NODE_ENV !== 'production' ? 'style-loader' : {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: ''
                            }
                        },
                        'css-loader',
                        'less-loader'
                    ]
                },

                {
                    test: /\.(html)$/,
                    use: {
                        loader: 'html-loader',
                        options: {
                            attrs: [ 'img:src', 'img:data-src', 'audio:src' ]
                        }
                    }
                },
                {
                    test: /\.(png|svg|jpg|gif|webp)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                esModule: false,
                                outputPath: '/images',
                                limit: 10 * 1024,
                                name: '[name].[hash:8].[ext]'
                            }
                        }
                    ]
                }
            ]
        },
        output: {
            publicPath: '',
            filename: 'js/[name].[fullhash:8].js',
            path: path.resolve(__dirname, '../dist')
        }
    };
};
// webpack.prod.js
const {merge} = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = env => {
    return merge(common(env), {
        mode: 'production',
        target: [ 'web', 'es5' ],
        externals: {
            'custom-jquery': '$'
        },
        // devtool: false,
        devtool: 'source-map',
        plugins: [
            new CleanWebpackPlugin(),
        ],
        output: {
            path: path.resolve('./dist'),
            publicPath: ''
        }
    });
};

demo in here

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions