Not all browsers currently have full support of the new ES6 features. This brings us to why we need tools like Babel and Webpack in order to create a development environment.
So rather than the user loading multiple JS libraries into HTML, we just have one bundled JS file that has all of our ES6 code in it. This reduces a lot of time spent loading resources. It can even prevent errors where some code in a JS library relies on another one being loaded but it hasn’t yet.
Secondly it comes at the dev server. In other words, all we have to do is write one line in our code and then we have a whole local development scheme that gets live.
Set up a web pack
mkdir es6 (創建一個 es6 file)
cd es6 (到 es6 file)
npm init -y
NPM init dash y allows us to skip the interactive questions that we usually get with the NPM. The result is that we have a packaged adjacent file which provides details about our project.
Right now it only has sections for the name version description and some other things about the project which you can edit later. But soon this will have a section that lists out our projects library dependencies.
So first up we’ll use the NPM i command. And the first one we’re packed at 4.1.0.
npm i firstname.lastname@example.org email@example.com — save-dev
Now we have a second dependency which is webpack -firstname.lastname@example.org, And then we’ll also pass the save dev option.
Why are we saving these as well ?(Development dependencies and not regular dependencies)
go head use cat package.json
So use the cat command which allows us to print the contents of a file.
So if not for save dev option these will be listed as regular dependencies. If we use the regular save option however we don’t want this behavior since that would mean we would have to conclude these libraries and all of their code within production versions of this codebase.
For the next step let’s go ahead and open up this project with our code editor.
So go ahead and add a source directory which will actually shorten to src.
and create index.js in it
write some code in js file and check its json file
So package.json have a test script already. Let’s actually remove that and replace it with a start script.(Notice that Jason everything is surrounded by double quotes.)
“start” : “webpack — mode development”,
“build” : “webpack — mode production”
npm run start
So the result of this bundling process is that we now have a new folder within our project. If you type in ls you’ll find that there is a dist which is short for distribution directory in the project.
So we open this with do so within our code editor or find just has one file called manager.
The most important part is that if you scroll to the bottom eventually you’re going to find in the valuation of our console.log.
If you run npm run build
The bundled code it’s much shorter and much more condensed because it’s optimized for production where you don’t want to run as many lines as you have to do or too many lines if you don’t have to you rather.