标签：splay 提示 doctype github global article overlay use 转码
目录
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
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"
}
}
webpack.config.jsconst 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,
}
};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>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 module1）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-dev2）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同时安装多个包
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 modulewebpack-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.
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
webpack
VScode（二）：ES6 & Nodejs & webpack & babel
标签：splay 提示 doctype github global article overlay use 转码
原文地址：https://www.cnblogs.com/UncleLivin/p/12188705.html
