Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
FiShelly opened this issue Oct 18, 2022 · 1 comment
Open

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

FiShelly opened this issue Oct 18, 2022 · 1 comment

Comments

@FiShelly
Copy link

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

@qqzhangyanhua
Copy link

I have the same problem and the package under node_modules cannot be compiled under pnpm monorepo, and using rootMode: 'upward' is also invalid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants