Skip to content
使用webpack3构建react开发环境
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
dist
src
.babelrc
package-lock.json
package.json
postcss.config.js
readme.md
webpack.config.js

readme.md

这个开发开发环境只是为了能够快速的使用webpack来进行react的开发的入门使用,并不(完全)适用用生产环境的实际应用 因为没有考虑webpack的配置分离、生产环境的配置等很多东西,但是对于入门使用webpack进行react开发来说,没啥问题

一、问题

由于reactcreate-react-app本身不是使用webpack,而也不像vue给了一个非常好用的vue-cli

所以在使用webpack构建react的开发环境的时候遇到了很多问题。

尤其是网上很多都是webpack1.x / webpack2.x的指导,webpack3.x之后很多东西都发生了变化,而babel的更新也不建议使用preset-es201X这样的操作,建议直接使用babel-preset-env进行操作.

实际上我在自己配置的过程中遇到的最关键问题就是babeljsx语法的编译,一开始总是无法编译,后来发现自己的包安装有问题。(这算是自己给自己挖的坑吧)

二、使用的依赖

webpack的开发环境就是对webpack的各种loader的配置及其他配置而已,因此还是很好理解的,如果熟悉webpack的话最好不过。

建议去看一下webpack 3.x的文档啥的。

依赖列表:

"devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.2"
  }

安装依赖:

安装完成后,可以直接通过npm install 安装依赖

npm install 

四、源码

地址:

五、最早发布于博文:

六、更新记录:

  • 2017-10-20
    • 修改基本的结构,通过与入口文件main.js同级的App.jsx引入其他组件
  • 2017-10-21
    • 修复webpackpostcss-loader的错误配置导致无法编译 less/sass 的问题
  • 2017-10-24
    • 增加webpack-dev-server自动打开浏览器open配置
  • 2017-10-27
    • 更改index.html生成方式,通过webpack插件及src/index.html生成dist/index.html
You can’t perform that action at this time.