假设node环境已经装好
当前目录创建package.json文件：
@H_404_4@{ "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" } }然后当前目录执行：
@H_404_4@npm install安装成功后在当前目录执行创建并编辑文件webpack.config.js：
@H_404_4@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:
@H_404_4@import React from 'react'; import { render } from 'react-dom'; var myDivElement = <div className="foo" />; render(myDivElement,document.getElementById('mountNode'));创建编辑index.html:
@H_404_4@<html> <head> <Meta charset="utf-8"> </head> <body> <div id="mountNode"></div> <script src="./dist/bundle.js"></script> </body> </html>执行命令webpack成功！
