前言 ES6 主要是为了解决 ES5 的先天不足
前言
ES6 主要是为了解决 ES5 的先天不敷，JavaScript 历史版本一直没有模块（module）体系，无法将一个大措施拆分成互相依赖的小文件，再用简单的要领拼装起来。
| 插件 | 版本 |
|--|--|
| @babel/core | 7.7.7 |
| @babel/preset-env | 7.7.7 |
| @babel/preset-react | 7.7.4 |
| babel-loader | 8.0.6 |
| html-webpack-plugin | 3.2.0 |
| webpack | 4.41.5 |
| webpack-cli | 3.3.10 |
| webpack-dev-server | 3.10.1 |
自行前往VScode官网下载，并按提示进行安置。
自行前往nodejs官网下载，并按提示进行安置。
若遇本地网络不善，可自行前往npm官网下载相关插件。
# 全局安置webpack和webpack-cli C:\Users\Administrator\Desktop\test>cnpm install webpack -g C:\Users\Administrator\Desktop\test>cnpm install webpack-cli -g 3.2 环境配置 3.2.1 配置package.json1）项目初始化
C:\Users\Administrator\Desktop\test>npm init2）编纂package.json
{ "name": "llw", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", // create mode "build" and "start" "build": "webpack --config webpack.config.js --colors --display-reasons --watch", "start": "webpack-dev-server --mode development --open --hot", }, "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.6", "babel-preset-env": "^1.7.0", "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^3.2.0", "webpack": "^4.41.5" } } 3.2.2 配置webpack.config.js const path = require('path'); const HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { // development为开发模式，production为出产模式 mode: "development", // 入口文件，，不指定路径则默认查找index.js entry: path.resolve(__dirname, './src/raytrace.js'), // 输出文件 output: { filename: "bundle.js", path: path.resolve(__dirname, 'build') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use:[{ loader: "babel-loader", options:{ presets:["@babel/preset-env","@babel/preset-react"] } }] } ] }, // 自动生成html文件 plugins: [ new HtmlwebpackPlugin({ // 指定网页标题 // title: 'test' // 从模板添加 template: './src/index.html' }) ], // 配置开发处事器，使得浏览器同步刷新 devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, } }; 3.2.3 配置index.js和index.html1）编纂index.js
class Main { constructor() { document.write("This is my test project!"); console.info("This is my test project!"); } } new Main();2）编纂index.html
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>test</title> </head> <body> </body> </html> 3.2.4 项目打包 C:\Users\Administrator\Desktop\test>webpack C:\Users\Administrator\Desktop\test>"node" "E:\nodejs\node_global\\node_modules\webpack\bin\webpack.js" Hash: 0290ecd3c50c9f00a7c2 Version: webpack 4.41.5 Time: 1267ms Built at: 2020-01-01 1:28:21 PM Asset Size Chunks Chunk Names bundle.js 10.8 KiB main [emitted] main index.html 300 bytes [emitted] Entrypoint main = bundle.js [./src/raytrace.js] 6.64 KiB {main} [built] Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/[email protected]@html-webpack-plugin/lib/loader.js!./src/index.html] 482 bytes {0} [built] [./node_modules/[email protected]@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/[email protected]@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] + 1 hidden module 4 项目执行 4.1 依赖安置温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31636.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")