Run Babel again after Webpack combines everything? - javascript

I have this:
{
test: /\.jsx?$/,
include: [APP_ROOT],
exclude: [path.resolve('./node_modules')],
use: {
loader: 'babel-loader',
options: {
plugins: [],
},
},
},
If I don't exclude node_modules, it'll throw Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'. However, I don't trust that every package is transpiled properly. Therefore, I want to run everything through Babel again after Webpack combines everything.
My understanding is that babel-loader runs Babel on each file individually. This causes the error above. If I run Babel on the whole output file, it works fine. Preferably, I'd want to run Babel on the output before Uglify/Terser.
How do I do this?

Related

Inconsistent behavior when Babel is run through Babel Loader [duplicate]

After running my code through webpack it contians arrow functions. I need the code to work in ie11 so I need to get rid of the arrow functions.
I'm using babel-loader for all .js files.
I wrote a loader to check code for arrow functions and ran it after the babel-loader and didn't get any arrow functions, so I know the output from babel is good.
I've also tried babel-polyfill and the babel plugin for transforming arrow funtions.
As I know the babel-loader outputs good code I suspect it might be a plugin, but I can't just disable them to test as that breaks the build.
Webpack plugins used in dev:
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
The problem also appears in prod as well, but fixing it in dev should tell me how to fix it in prod as well.
I don't know of anywhere else the arrow function could be coming from, so I expect to, in essence, get code that works on ie11, but there's arrow functions coming from somewhere so it doesn't work.
It's not my code, so I can't just post it all. I can, however, post relevant snippets, but I don't know where the problem is so I don't know what's relevant yet.
I had the same problem and found the cause and solution.
Cause
babel-loader converts the grammar of es6 and higher to es5. However, because the conversion is done by the loader, the conversion occurs only in each file before it is bundled.
After the loader completes the conversion, webpack starts to bundle. However, webpack does not care about target version of babel-loader when it bundles files. It just bundles file with grammar of it's default ECMA version(which could be es6 or later). It was the reason why bundled result includes es6 grammar such as arrow function.
Initial Step
file1 (es6)
file2 (es6)
file3 (es6)
After loader works
file1' (es5)
file2' (es5)
file3' (es5)
After webpack bundles files
bundled file (es6)
Solution
You can just simply add target: "es5" in webpack.config.js to handle this. After that, webpack bundles file in grammar of es5
// .babelrc
{
"presets": ["#babel/preset-env"]
}
// webpack.config.js
module: {
...
target: "es5", // include this!!
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
}
In webpack 5:
module.exports = {
target: ['web', 'es5']
}
target is positioned at the root of the config schema and needs to know whether it targets a node or web environment
References:
https://webpack.js.org/configuration/target/
Webpack 5 "dependOn" and target: "es5" appear to be incompatible
You can use babel. Since arrow functions comes with es6 , you can use babel to convert es5. Also this link could help to Webpack not converting ES6 to ES5.
Given below webpack config is what I used for babel.
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
babelrc: false,
presets: ["#babel/preset-env", "#babel/preset-react","es2015"]
}
}
]
}

what's the workflow of style-loader and css-loader

I'm new to webpack, still a little bit confused that how webpack cooperate with loaders. Let's we have below typescript file index.ts:
//index.ts
import "bootstrap/dist/css/bootstrap.css";
...
// typescript code
and below is the webpack config file:
module.exports = {
mode: "development",
entry: "./src/index.ts",
output: { filename: "bundle.js" },
resolve: { extensions: [".ts", ".js", ".css"] },
module: {
rules: [
{ test: /\.ts/, use: "ts-loader", exclude: /node_modules/ },
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
}
};
Below is my personal thought on how webpack works with loaders, please correct me if I'm wrong:
Step 1-Webpack encounter index.ts, so it passes this file to ts-loader, and ts-loader read the file and pass it to ts compiler, ts compiler generates js code file index.js and pass back to ts-loader, then ts-loader passes index.js back to webpack.
Step 2- Webpack reads index.js and needs to resolve the css file, so Webpack passes the task to css-loader, so css-loader reads the css file as a long long string, then passes the task to style-loader, which creates js code that can be embedded in tags in the index.html file.
Step 3- bundle.js is ready, and client sends a http request to get index.html, and the bundle.js is fetched and create a <style> tags to include all css styles.
Is my above understanding correct? If yes, below is my questions:
Q1-after style-loader generates js code, does it pass those js code back to css-loader, then css-loader passes received js code to webpack? or style-loader pass generated js code to webpack directly?
Q2- in the webpack config file:
...
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
...
it seems that the style-loader is used first, then css-loader steps in( I have tried this approach, it worked, not sure why it worked)
isn't that the css-loader should start to work first then style-loader as:
...
{ test: /\.css$/, use: ["css-loader", "style-loader"] }
...
Is my above understanding correct?
Yes
Q1-after style-loader generates js code, does it pass those js code back to css-loader, then css-loader passes received js code to webpack? or style-loader pass generated js code to webpack directly?
Answer: style-loader pass generated js code to webpack directly
Q2 it seems that the style-loader is used first, then css-loader steps in,
It can seem wrong. But its one of those things you need to read the docs for. The last thing to process it is mentioned at the top of the array. Personally I don't think the other way around would be any more intuitive.

Set up Webpack and Babel to transpile / polyfill older code

I have an entire legacy AngularJS 1.x application that used to run through gulp and babel. We are transitioning to the newer Angular 2+ but I'm running into an issue trying to get Webpack to actually find and compile the legacy files. I've tried following instructions which are all almost identical like this video:
https://www.youtube.com/watch?v=H_QACBSqRBE
But the webpack config simply doesn't do anything to the existing files. Is there a way to grab a WHOLE FOLDER of older components, that DO NOT have any imports or exports? I feel like entry is supposed to follow the import dependency path but that just doesn't exist for older AngularJS 1.x projects.
Errors are NOT being thrown during the build it just...doesn't transpile or polyfill.
example of what that section of the config looks like:
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
We did this recently. We created "dummy" entry point files to avoid having to change all of our AngularJS files to have require/import statements.
./entry-points/feature1.ts
export const importAll = (r: any): void => {
r.keys().forEach(r);
};
importAll(require.context('./app/feature1', true, /module\.js$/));
importAll(require.context('./app/feature1', true, /(^(?!.*(spec|module)\.js).*\.js)$/));
webpack.config.js
entry: {
'feature1': './entry-points/feature1.ts'
}
More detail here

How to configure Webpack & Babel to fail on undeclared variables?

I am using webpack with Babel to build my React application.
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['env', 'react']
},
exclude: /node_modules/
}
]
},
I have recently been using env (formerly es2015), so part of my code has some undeclared variables. I would like to configure webpack to fail at build rather than having a buggy js, which at execution which throws me error like :
assignment to undeclared variable fooBar
Not sure if Babel can do that, but Eslint sure can! Simply setup your Eslint config file; as well, implement Eslint into your webpack config using Eslint Webpack Plugin so it can fail on building. Feel free to let me know if you need more help on this.

Trouble implementing Webpack css-loader, error on compile

I'm new to webpack, and I'm playing around with trying to create my own build from forking another decent build.
One of things that wasn't compiling was the css, so I did the following:
Make sure there were no css loaders currently in the webpack config file (there weren't)
Run npm install css-loader --save-dev
Add loaders
Add import css from './static/css/style.css'; to my entry .js file
Make some arbitrary changes to my css to test
Just for the sake of clarity, my loaders looked like this:
loaders: [
{ ...babel loader... },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
I then ran npm run build, and it was here that my terminal came up with the following error:
ERROR in ./src/app-client.js
Module not found: Error: Cannot resolve module 'style-loader' in /path/to/app/.../src
# ./src/app-client.js 15:13-46
I'm not really sure where I'm going wrong here, any help or pointers would be appreciated.
You probably forgot to install style-loader. So just run:
npm install style-loader --save-dev

Categories