[webpack] 配置react+es6开发环境
2016-10-18 11:02
369 查看
写在前面
每次开新项目都要重新安装需要的包,简单记录一下。以下仅包含最简单的功能:
编译react
编译es6
打包src中入口文件index.js至dist
webpack配置react+es6开发环境
1、安装react语法环境npm install react react-dom --save
2、安装webpack开发环境
npm install webpack --save-dev
3、安装babel
npm install babel-loader babel-core --save-dev
4、安装react转换规则
npm install babel-preset-react --save-dev
5、安装es6转换规则
npm install babel-preset-es2015 --save-dev
6、安装es7转换规则
ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
npm install babel-preset-stage-0 --save-dev
npm install babel-preset-stage-1 --save-dev
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-stage-3 --save-dev
7、配置.babelrc文件
{ presets:{ "react", "es2015", "stage-0" }, plugins:[] }
8、创建webpack.config.js
var webpack = require("webpack"); var path = require("path"); var root = path.join(__dirname, "./"); var src = path.join(root, "./src"); var dist = path.join(root, "./dist"); module.exports = { entry: { "index": [path.join(__dirname, "./src/index.js")] }, output: { path: dist, filename: "/static/[name].js" }, module: { loaders: [ { test: /\.jsx?$/, loader: "babel" } ] }, resolve: { extensions: ['', '.js'] } };
小结
以上只是最简单的功能,记下来也只是备忘,并不能提高效率。之后会把以上功能写成脚本,用于自动初始化不同类型的项目,主治懒癌晚期相关文章推荐
- webpack安装配置使用教程详解
- 基于gulp+webpack的"约定大于配置"的构建方案探讨
- webpack + vuejs(都是1.0的版本) 基本配置(一)
- webpack 多入口配置
- webpack(四)本地服务器环境配置
- webpack echarts配置实例
- webpack入门和实战(一):webpack配置及技巧
- 实用的webpack 配置文件
- vue 多项目 依赖webpack开发共用 配置
- Webpack配置示例和详细说明
- webpack +Reactjs +babel 加载器配置
- webpack 发布配置
- webpack 自动发现 entry 的配置和引用方式
- webpack 多entry 配置
- 配置redux react 以及webpack
- webpack react-hot-loader配置
- webpack配置别名alias出现的错误匹配
- Webpack-dev-server结合后端服务器的热替换配置
- gulp+webpack构建配置
- 利用gulp自动完成配置"吐"给webpack执行