再一次输给了版本更新
main.js
//这里的main.js是我们项目的JS入口文件
import $ from 'jquery'
import './css/index.css'
// import './css/index.less'
import 'bootstrap/dist/css/bootstrap.css'
$(function(){
$('li:odd').css('backgroundColor','blue')
$('li:even').css('backgroundColor',function(){
return 'lightblue'
})
})
class Person{
static info = { name:'zs',age:20 }
}
//访问Person类身上的info静态属性
console.log(Person.info)
//通过Babel可以帮我们将高级的语法转换为低级的语法
//1.在webpack中,可以运行如下两套命令,安装两套包,去安装Babel相关loader功能:
//1.1第一套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
//1.2第二套包:npm i babel-preset-env babel-preset-stage-0 -D
//2.打开webpack的配置文件,在module节点下的rules数组中,添加一个新的匹配规则:
//2.1{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
//3.在项目的根目录中,新建一个叫做.babelrc的Babel配置文件,这个配置文件属于JSON格式,
//所以,在写babelrc配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号。
//3.1在.babelrc写如下的配置:
//{
// "presets":["env","stage-0"],
// "plugins":["transform-runtime"]
//}
划重点:npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
package.json
里的版本号一览
{
"name": "WEBPACK-STUDY",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^2.30.1",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^3.0.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^2.11.5"
}
}