webpack configuration function does not configure babel-loader for es6 code conversion, nor does it configure .babelrc, so why does it not report an error when using import directly in index.js?
webpack.config.js
var path = require("path");
module.exports = {
//
entry: {
main: "./src/index.js",
},
output: {
//
path: path.join(__dirname, "dist"),
filename: "main.js",
},
}index.js
import "./a.js";
console.log("index"); I don't think you understand what babel is for
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015 + code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through * @ babel/polyfill)
- Source code transformations (codemods)
- And more! (check out these videos for inspiration)
Quick check the latest version of major browsers' support for ES6
my understanding is that webpack itself supports ES6 syntax (depending on your Node version)
babel only translates es6 into es5 to be compatible with browsers that do not support es6. If your browser supports es6, then using es6 in index.js will not report errors
because node itself supports it, ECMAScript Modules can run normally without Babel
hr class= "answer" >because webpack uses acorn:
webpackimport, export
webpack starts with the entry files configured by the configuration file, that is, the files that webpack has to process the package, and does not have to be executed immediately.
what webpack does is execute webpack's node program, read the wepack configuration file, and use the node program to process the program file to be packaged. You should understand that dealing with files here means dealing with the text contents of files .
that is, uses a js program to process the text contents of other js files .
read the code in your project as text but do not need to execute it. After the webpack program reads the various module syntax of the entry a.js file in your project, it will replace with text and replace it with a module syntax that needs to be recognized by the environment in which your project code needs to be executed.
in short, what webpack does is package the js code text, not execute the code.
Previous: The result is correct, but why is this error Cannot read property 'indexOf' of undefined?
Next: Does the import corresponding to es6 export default class have to introduce the same class name?
see that the arttemplate template engine is used in a project to package and build the entire project with jquery and webpack, but what do you mean by data-type and data-click in the source code, or all the attributes that begin with data- in the projec...
problem description use nodejs for server rendering and pug for rendering templates. Static resources are packaged through webpack. In order to solve the caching problem, how can webpack or gulp insert the static resource path with hash into the pug? ...
configure https: github.com gaearon re. according to the document. When you modify the name field of state in the file, the page will not be updated, but the button text, page in the render function will be updated. "dev": "webpack-dev...
is there a better arttemplate+webpack+jquery best practice recommendation? because of the high requirements for deo in the project, we use this architecture and do not use vue and react single-page applications, but for jquery applications, the details p...
problem description webpack configuration the environmental background of the problems and what methods you have tried if you delete resolve: {.}, you will not get an error. is it possible that these two methods cannot be used together? Or i...
< H1 > has been solved. The configuration has been modified. Thank you < H1 >. entry: { vendor: [ jquery , better-scroll ], home: . src pages home index.js , login: . src pages login index.js }, new webpack.optimize.Co...