React+antDesign+webpack项目构建(支持按需加载和热更新)

react

"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来进行编译。