"dependencies": {
"antd":
"^3.4.0",
"babel-core":
"^6.26.0",
"babel-loader":
"^7.1.4",
"babel-plugin-import":
"^1.7.0",
"babel-preset-es2015":
"^6.24.1",
"babel-preset-react":
"^6.24.1",
"css-loader":
"^0.28.11",
"react":
"^16.3.1",
"react-dom":
"^16.3.1",
"react-router":
"^4.2.0",
"react-router-dom":
"^4.2.2",
"style-loader":
"^0.20.3",
"webpack":
"^2.3.1",
"webpack-dev-server":
"^2.4.2"
}
以上是需要安装的依赖库,在npm init后的package.json文件内。然后再创建webpack.config.js文件。
这里的webpack暂不支持4以上的版本。
这里babel-loader用于解析.jsx后缀的文件。.css文件需要style-loader css-loader来解析。
presets用来表示支持的预置库
plugin用来表示按需加载"babel-plugin-import": "^1.7.0",
entry：打包入口文件，
output:打包之后，生成bundle.js文件
devServer: webpack-dev-server用来支持文件热更新。
之后在package.json里 添加script
当开发人员在目录终端下 输入npm start,就能自动执行打包构建。并且自动打开127.0.0.1:8080。当修改代码时，按下CTRL+S就能自动替换内容，
甚至能够保存当前状态。以上就是前端环境的大致搭建内容。可以大大提高开发效率。
对于开发环境来说，第一次构建稍慢，之后每次修改都可以很快的构建完成，更新页面。对于处理js 、jsx文件的loader。 推荐使用最新的babel-preset-env来进行编译。