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 参考资料

行走的小柚子

查看全文

相关阅读:
select、poll和epoll
Linux 常用命令之文件和目录
 SmartPlant Review 帮助文档机翻做培训手册
 SmartPlant Foundation 基础教程 3.4 菜单栏
 SmartPlant Foundation 基础教程 3.3 标题栏
 SmartPlant Foundation 基础教程 3.2 界面布局
 SmartPlant Foundation 基础教程 3.1 DTC登陆界面
 SmartPlant Foundation 基础教程 1.4 SPF架构
 SmartPlant Foundation 基础教程 1.3 SPF其他功能
 SmartPlant Foundation 基础教程 1.2 SPF集成设计功能

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

最新文章
阻止事件冒泡
 cookies存多个键值对
 拖拽
 阻止默认行为
 element
数据同步
 加载进度条
 分页插件
 bootstrap分页
 本地存储localstorage

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`热加载