zoukankan html css js c++ java

VScode（二）：ES6 & Nodejs & webpack & babel

前言
1 VScode配置安装
2 Nodejs配置安装
3 VScode调试ES6
- 3.1 扩展插件安装
  - 3.1.1 VScode插件
  - 3.1.2 npm插件
- 3.2 环境配置
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官网下载，并按提示进行安装。
在这里插入图片描述

3 VScode调试ES6

在这里插入图片描述

3.1 扩展插件安装

3.1.1 VScode插件

在这里插入图片描述

3.1.2 npm插件

若遇本地网络不善，可自行前往npm官网下载相关插件。

# 全局安装webpack和webpack-cli
C:UsersAdministratorDesktop	est>cnpm install webpack -g
C:UsersAdministratorDesktop	est>cnpm install webpack-cli -g

3.2 环境配置

3.2.1 配置`package.json`

1）项目初始化

C:UsersAdministratorDesktop	est>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.js`和`index.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

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>test</title>
</head>
<body>
</body>
</html>

3.2.4 项目打包

C:UsersAdministratorDesktop	est>webpack

C:UsersAdministratorDesktop	est>"node"  "E:
odejs
ode_global\node_moduleswebpackinwebpack.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:UsersAdministratorDesktop	est>npm install @babel/core --save-dev

# 安装转码规则，新版本安装babel-preset-env，老版本提示安装babel-preset-es2015
C:UsersAdministratorDesktop	est>npm install @babel/preset-env --save-dev

# 安装react
C:UsersAdministratorDesktop	est>npm install @babel/preset-react --save-dev

# 安装babel-loader
C:UsersAdministratorDesktop	est>npm install babel-loader --save-dev

2）webpack系列

# 安装html-webpack-plugin
C:UsersAdministratorDesktop	est>npm install html-webpack-plugin --save-dev

# 安装clean-webpack-plugin
C:UsersAdministratorDesktop	est>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:UsersAdministratorDesktop	est>npm run build

> llw@1.0.0 build C:UsersAdministratorDesktop	est
> webpack --config webpack.config.js --colors  --display-reasons --watch


C:UsersAdministratorDesktop	est>"node"  "C:UsersAdministratorDesktop	est
ode_modules.bin\..\_webpack@4.41.5@webpackinwebpack.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:UsersAdministratorDesktop	estsrc  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:UsersAdministratorDesktop	est
ode_modules\_html-webpack-plugin@3.2.0@html-webpack-pluginlibloader.js!C:UsersAdministratorDesktop	estsrcindex.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:UsersAdministratorDesktop	est>npm start

> llw@1.0.0 start C:UsersAdministratorDesktop	est
> webpack-dev-server --mode development --open --hot


C:UsersAdministratorDesktop	est>"node"  "C:UsersAdministratorDesktop	est
ode_modules.bin\..\_webpack-dev-server@3.10.1@webpack-dev-serverinwebpack-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:UsersAdministratorDesktop	est
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-core、babel-preset-env、babel-preset-react与 @babel/core、@babel/preset-env、@babel/preset-react之间的区别？
在这里插入图片描述
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

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

webpack

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

6 参考资料

行走的小柚子

查看全文

相关阅读:
ASP.NET Core 一步步搭建个人网站（6）_单页模式和优化
 ASP.NET Core 一步步搭建个人网站（5）_Api模拟和网站分析
 ASP.NET Core 一步步搭建个人网站（4）_主页和登录验证
 ASP.NET Core 一步步搭建个人网站（3）_菜单管理
 ASP.NET Core 一步步搭建个人网站（2）_一键部署和用户注册登录
 ASP.NET Core 一步步搭建个人网站（1）_环境搭建
 实战_Spring_Cloud
搭建个人OpenAPI
MyCat | 分库分表实践
 算法题丨Next Permutation

原文地址：https://www.cnblogs.com/UncleLivin/p/12188705.html

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.js和index.html

3.2.4 项目打包

4 项目执行

4.1 依赖安装

4.2 项目运行

4.2.1 webpack项目打包

4.2.2 webpack-dev-server热加载

5 踩坑指南

6 参考资料

3.2.1 配置`package.json`

3.2.2 配置`webpack.config.js`

3.2.3 配置`index.js`和`index.html`

4.2.1 `webpack`项目打包

4.2.2 `webpack-dev-server`热加载