使用webpack搭建react ES6开发环境

使用webpack搭建react ES6开发环境

• 创建项目
  
  1. 新建文件夹作为工作目录
  2. 命令行键入npm init初始化项目
• 安装依赖
  
  1. 安装webpack
     npm install --save-dev webpack
  2. 安装react、react-dom
     npm install --save-dev react react-dom
  3. 需要使用webpack 能正确解析 ES6语法还需安装babel
     npm install --save-dev babel-core babel-loader babel-plugin-transform-class-properties babel-preset-2015 babel-preset-react babel-stage-0
  4. 如需引用外部样式表，安装以下loader
     npm install --save-dev css-loader style-node

• 以demo为例，项目结构如下:

  • demo
    
    • app
      
      • app.jsx
    • build
      
      • bundle.js
    • node_modules
    • package.json
    • webpack.config.json

• 如上所示，app文件夹作为项目源代码目录，build为经编译后的文件存放目录，node_modules安装模块目录，package.json项目描述文件，webpack.config.json是webpack的配置文件(需手动建立)。

  此处有两个重要文件package.json和webpack.config.json。
  package.json配置如下:

  {
  "name": "webpack_kg_components",
  "version": "1.0.0",
  "description": "this is a react components lib for mobile",
  "main": "app.js",
  "scripts": {
  "start": "webpack-dev-server --progress --colors --content-base ./build",
  "compile": "webpack"
  },
  "keywords": [
  "react",
  "components"
  ],
  "author": "KuangGuanghu",
  "license": "ISC",
  "devDependencies": {
  "babel-core": "^6.24.1",
  "babel-loader": "^7.0.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-preset-env": "^1.4.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-es2016": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "css-loader": "^0.28.1",
  "style-loader": "^0.17.0",
  "webpack": "^2.5.1"
  }
  }

  _注意！在上面的文件中scripts 配置运行脚本，此处使用了webpack提供的一个微型服务器,所以在此之前还需要通过npm install webpack-dev-server -g 安装。

  webpack.config.json配置如下:

  const path = require('path')
  module.exports = {
  entry: path.resolve(__dirname,'./app/app.jsx'),
  output: {
      path: path.resolve(__dirname,'./build'),
      filename: 'bundle.js'
  },
  module: {
      loaders: [
          {
              test: /(\.jsx|\.js)$/,
              loader: 'babel-loader',
              include: path.resolve(__dirname,'./app'),
              query:{
                  presets:['es2015','stage-0','react'],
                  plugins: [
                      ["transform-class-properties", { "spec": true }]
                  ]
              },
          },{
              test: /.css$/,
              loader: 'style-loader!css-loader'
          }
      ]
  }
  }

  注意！ 在上面文件entry是告诉webpack编译项目的入口文件，output告诉webpack编译后的文件存放位置，module用于配置webpack在项目中需使用到的模块和插件等

• 运行项目
  命令行输入npm start 项目便可运行了

（以上的命令行键入都需在项目目录下进行）