babel / babel/babel-loader

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

Open
#955 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

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.**

```JavaScript
// 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')
}
};
};

```

```JavaScript
// 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](https://github.com/FiShelly/lerna-demo)

Contributor guide

Open the contributing guide

Research direction

Start with webpack.common.js and webpack.prod.js, focusing on the JavaScript rule's exclude/include patterns and Babel loader options. Reproduce the build using the linked lerna-demo, compare the generated output with the reported behavior, and confirm completion when the relevant ES6 dependency code is transpiled to ES5 without the unwanted require method.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.