假设node环境已经装好

当前目录创建package.json文件：

{
  "name": "react-demo","version": "1.0.0","description": "a test","main": "bundle.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"author": "xxx","license": "MIT","devDependencies": {
    "babel-core": "^6.24.1","babel-loader": "^7.0.0","babel-preset-es2015": "^6.24.1","css-loader": "^0.28.0","style-loader": "^0.16.1","webpack": "^2.4.1"
  },"dependencies": {
    "babel-preset-react": "^6.24.1","react": "^15.5.4","react-dom": "^15.5.4"
  }
}

然后当前目录执行：

npm install

安装成功后在当前目录执行创建并编辑文件webpack.config.js：

var path = require('path')

module.exports = {
  entry: './entry.js',output: {
    path:path.join(__dirname,'/dist'),filename: 'bundle.js'
  },resolve: {
        extensions: ['.js','.jsx']
    },module: {
    loaders: [
      {test: /\.css$/,loader: 'style-loader!css-loader'},{
        test: /\.js?$/,//表示要编译的文件的类型，这里要编译的是js文件
        loader: 'babel-loader',//装载的哪些模块
        exclude: /node_modules/,//标示不编译node_modules文件夹下面的内容
        query: {//具体的编译的类型，
            compact: true,//表示不压缩
            presets: ['es2015','react']//我们需要编译的是es6和react
        }
      }
    ]
  }
}

创建编辑入口文件entry.js:

import React from 'react';
import { render } from 'react-dom';
var myDivElement = <div className="foo" />;
render(myDivElement,document.getElementById('mountNode'));

创建编辑index.html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="mountNode"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

执行命令webpack成功！

配置webpack+react环境

假设node环境已经装好

相关文章