|-- config // webpack配置
|-- demo // 开发时预览用
|-- dist // 打包结果
|-- src // 源文件目录
| -- assets // 存放图片等媒体文件
| -- style // 存放样式，项目使用的是less来编写样式
"devDependencies": {
// babel用于将你写的es6+的代码转换到es5
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0", // 用于支持class属性
"@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0", // 自动polyfill es5不支持的api特性
"@babel/preset-env": "^7.0.0", // 根据目标环境来按需转码
"@babel/preset-react": "^7.0.0", // 让babel支持react语法
"babel-loader": "^8.0.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.4.4",
"less-loader": "^4.1.0", // 使用less来编写样式
"mini-css-extract-plugin": "^0.5.0", // 将css提取成一个单独的文件
"style-loader": "^0.23.0",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2", // webpack4之后需要额外安装webpack-cli
"webpack-dev-server": "^3.1.14", // 开发时预览组件所用的服务，在文件变化时会自动刷新页面
"webpack-merge": "^4.1.4" // 用于合并webpack配置
}
webpack.base.js
webpack.config.dev.js // 开发时的配置
webpack.config.prod.js // 打包发布时的配置