Browsers currently have limited support for es6. We usually use the babel transcoder to convert from es6 to es5 to achieve browser support. But babel only converts new JavaScript syntax (syntax) by default, not new APIs, such as global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, and some methods defined on global objects ( Such as Object.assign) will not be transcoded. And the two commands like import and export are not supported in any browser now, and babel can't convert it to ES5 supported by browsers, the reason is: babel is just a translation, assuming a.js is imported b.js, transcoding a.js, just translates a.js, does not read and merge the content of b.js, if you want to include a.js, b in a final js .js code, then you need to use a packaging tool
1. For the installation of node.js, please refer to the click to open the link . Remember to configure environment variables. Otherwise, it will cause a lot of problems later.
2. The following installation tutorials are based on version 4.4.1 of node. Because different versions of node will have differences. (Before installing and using webpack according to the online tutorial, it always appeared on the command line that webpack is not an executable program. After two days, I found out that the version of node was originally a problem. 1.
1. Install webpack globally. Command line input npm install webpack -g
2. Install webpack globally. Command line input npm install webpack-cli -g
ps: Install globally to use webpack directly from the command line.
3. Create a new project folder test.
4. Navigate to the project folder on the command line and enter npm init on the command line. Initialize the npm package and generate package.json
5. Install webpack locally. Command line input npm install webpack -D
PS: -D is shorthand for --sav-dev
--save: save the configuration information to package.json (package.json is the nodejs project configuration file);
-dev: save to the devDependencies node of package.json, if -dev is not specified, it will be saved to the dependencies node;
Generally stored in dependencies like these express/ejs/body-parser etc.
6. Install webpack-cli locally. Command line input npm install webpack -D
ps: After local installation, you can use webpack directly locally. Just need to enter node_module/.bin/webpack under the project.
7. In fact , it webpack4.xis './src/index.js'used as the entry, so we need to create the src file, the index.js file, and other js files.
8. The packaging method of webpack4.x is no longer available webpack 文件a 文件b, but run it directly webpack --mode developmentor webpack --mode production, so it will be packaged by default. The entry file is './src/index.js'and the output path is './dist/main.js', where the src directory, the index.js file, needs to be created manually, and the dist directory and main.js will be automatically generated.
9. Simplify the input: we add two members to package.json:scripts
"dev":"webpack --mode development", "build":"webpack --mode production"In the future, we only need to execute on the command line ,
npm run dev
which is equivalent to execution
webpack --mode development
, and execution
npm run build
is equivalent to execution
webpack --mode production
.
You can see that the dist directory is generated in the root directory, and the main.js file is generated in the dist directory. The main.js file has packaged the code of the index.js file in the src directory.