VScode(二):ES6 & Nodejs & webpack & babel

目录

  • 前言
  • 1 VScode配置安装
  • 2 Nodejs配置安装
  • 3 VScode调试ES6
    • 3.1 扩展插件安装
      • 3.1.1 VScode插件
      • 3.1.2 npm插件
    • 3.2 环境配置
      • 3.2.1 配置package.json
      • 3.2.2 配置webpack.config.js
      • 3.2.3 配置index.jsindex.html
      • 3.2.4 项目打包
  • 4 项目执行
    • 4.1 依赖安装
    • 4.2 项目运行
      • 4.2.1 webpack项目打包
      • 4.2.2 webpack-dev-server热加载
  • 5 踩坑指南
  • 6 参考资料

前言

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 |

1 VScode配置安装

自行前往VScode官网下载,并按提示进行安装。

2 Nodejs配置安装

自行前往nodejs官网下载,并按提示进行安装。
VScode(二):ES6 & Nodejs & webpack & babel_第1张图片

3 VScode调试ES6

VScode(二):ES6 & Nodejs & webpack & babel_第2张图片

3.1 扩展插件安装

3.1.1 VScode插件

VScode(二):ES6 & Nodejs & webpack & babel_第3张图片
VScode(二):ES6 & Nodejs & webpack & babel_第4张图片

3.1.2 npm插件

若遇本地网络不善,可自行前往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.json

1)项目初始化

C:\Users\Administrator\Desktop\test>npm init

2)编辑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.jsindex.html

1)编辑index.js

class Main {
  constructor() {
   document.write("This is my test project!");
   console.info("This is my test project!");
  }
}
new Main();

2)编辑index.html




    
    test



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/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 482 bytes {0} [built]
    [./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/_webpack@4.41.5@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

4 项目执行

4.1 依赖安装

1)babel系列

# 安装babel-core
C:\Users\Administrator\Desktop\test>npm install @babel/core --save-dev

# 安装转码规则,新版本安装babel-preset-env,老版本提示安装babel-preset-es2015
C:\Users\Administrator\Desktop\test>npm install @babel/preset-env --save-dev

# 安装react
C:\Users\Administrator\Desktop\test>npm install @babel/preset-react --save-dev

# 安装babel-loader
C:\Users\Administrator\Desktop\test>npm install babel-loader --save-dev

2)webpack系列

# 安装html-webpack-plugin
C:\Users\Administrator\Desktop\test>npm install html-webpack-plugin --save-dev

# 安装clean-webpack-plugin
C:\Users\Administrator\Desktop\test>npm install clean-webpack-plugin --save-dev

npm install packagename --save-dev可以简化为npm i packagename -s -d,也可以 npm install packagename1 packagename2 packagename3 ...... packagenameN --save-dev同时安装多个包

4.2 项目运行

4.2.1 webpack项目打包

C:\Users\Administrator\Desktop\test>npm run build

> llw@1.0.0 build C:\Users\Administrator\Desktop\test
> webpack --config webpack.config.js --colors  --display-reasons --watch


C:\Users\Administrator\Desktop\test>"node"  "C:\Users\Administrator\Desktop\test\node_modules\.bin\\..\_webpack@4.41.5@webpack\bin\webpack.js" --config webpack.config.js --colors  --display-reasons --watch

webpack is watching the files…

Hash: 0a2382ea3e2ed6e90ab8
Version: webpack 4.41.5
Time: 1039ms
Built at: 2020-01-01 4:08:25 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js   4.42 KiB    main  [emitted]  main
index.html  169 bytes          [emitted]  
Entrypoint main = bundle.js
[./src/index.js] 165 bytes {main} [built]
    single entry C:\Users\Administrator\Desktop\test\src  main
[./src/sub.js] 201 bytes {main} [built]
    cjs require ./sub [./src/index.js] 1:10-26
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
        single entry C:\Users\Administrator\Desktop\test\node_modules\_html-webpack-plugin@3.2.0@html-webpack-plugin\lib\loader.js!C:\Users\Administrator\Desktop\test\src\index.html 
    [./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        cjs require global [./node_modules/_lodash@4.17.15@lodash/lodash.js] 1:0-57
    [./node_modules/_webpack@4.41.5@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        cjs require module [./node_modules/_lodash@4.17.15@lodash/lodash.js] 1:0-57
        + 1 hidden module

4.2.2 webpack-dev-server热加载

C:\Users\Administrator\Desktop\test>npm start

> llw@1.0.0 start C:\Users\Administrator\Desktop\test
> webpack-dev-server --mode development --open --hot


C:\Users\Administrator\Desktop\test>"node"  "C:\Users\Administrator\Desktop\test\node_modules\.bin\\..\_webpack-dev-server@3.10.1@webpack-dev-server\bin\webpack-dev-server.js" --mode development --open --hot
10% building 1/1 modules 0 activei 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\Users\Administrator\Desktop\test
i 「wds」: 404s will fallback to /index.html
i 「wdm」: Hash: ded3a094a76a02ed0af1
Version: webpack 4.41.5
Time: 1466ms
Built at: 2020-01-01 5:10:48 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js    395 KiB    main  [emitted]  main
index.html  169 bytes          [emitted]  
Entrypoint main = bundle.js
[0] multi ./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src 52 bytes {main} [built]
[./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/overlay.js] 3.51 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/socket.js] 1.53 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/createSocketUrl.js] 2.91 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/log.js] 964 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/reloadApp.js] 1.59 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.10.1@webpack-dev-server/client/utils/sendMessage.js] 402 bytes {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/_webpack@4.41.5@webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] ./node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 165 bytes {main} [built]
    + 21 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/index.html] 341 bytes {0} [built]
    [./node_modules/_lodash@4.17.15@lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/_webpack@4.41.5@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/_webpack@4.41.5@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i 「wdm」: Compiled successfully.

在这里插入图片描述

5 踩坑指南

1)npm全局安装和局部安装区别?

  • 全局安装npm install packagename -g将包置于安装目录的node_modules文件中
  • 局部安装npm install packagename --save-dev是将安装包版本信息写入package.json文件的devDependencies字段,npm install packagename --save写入devdependencies字段,两者都存在于指定项目的node_modules文件中

2)babel-corebabel-preset-envbabel-preset-react@babel/core@babel/preset-env@babel/preset-react之间的区别?
VScode(二):ES6 & Nodejs & webpack & babel_第5张图片
7.0版本后包名默认为@label

3)webpack-dev-server和webpack执行参数?

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot --inline",
    "build": "webpack --config webpack.config.js --colors  --progress  --display-reasons --watch -p -d"
  },

webpack-dev-server

  1. --mode 开发模式
  2. --open 打开浏览器
  3. --hot 热加载
  4. --inline 自动刷新

webpack

  1. --config webpack.config.js 使用配置文件
  2. --colors 添加颜色
  3. --progress 显示进度条
  4. --display-reasons 显示情形
  5. --watch 监听变动并自动打包
  6. -p 压缩混淆脚本
  7. -d 生成map映射文件

6 参考资料

  1. ECMAScript 6入门
  2. Webpack傻瓜式指南
  3. 详解Webpack + ES6 最新环境搭建与配置
  4. react+webpack+es6实现Hello World

你可能感兴趣的