React+webpack+Babel项目搭建及配置

React+webpack+Babel项目搭建及配置
参考GitHub链接：https://github.com/theJian/build-a-hn-front-page

1. 安装node.js
2. 安装webapck(打包工具): npm install webpack@4.23.1 –g
3. 安装webpack-dev(webpack服务器):npm install webpack-dev-server –g
4. 建立webpack 配置文件: webpack 使用一个名为 webpack.config.js 的配置文件, 现在在你的项目根目录下创建该文件.
   var path = require(‘path’);

module.exports = {
entry: path.resolve(__dirname, ‘app/app.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’
}
}
5. 创建app/app.js: document.write(‘It works’);
6. 创建 build/index.html, 填入以下内容并执行webpack打包后将会在build文件夹下看到生成的build.js文件:

7.配置 package.json 在项目根目录下运行 npm init -y 会按照默认设置生成 package.json, 修改 scripts 的键值如下: "scripts": { "start": "webpack-dev-server", "build": "webpack" } 现在执行 npm run build 相当于 webpack, npm run start 相当于 webpack-dev-server

8. 安装 React:
   npm install react react-dom --save
   为了简化 AJAX 请求代码, 这里引入 jQuery:
   npm install jquery --save

9. 安装 Babel 的 loader 以支持 ES6 语法:
   npm install babel-core@6.26.0 babel-loader@7.1.2 babel-preset-es2015 babel-preset-react@6.24.1 babel-preset-env@1.6.1 --save-dev

10.配置 webpack.config.js 来使用安装的 loader.
// webpack.config.js

var path = require(‘path’);

module.exports = {
entry: path.resolve(__dirname, ‘app/app.js’),
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
query: {
presets: [‘es2015’,‘react’]
}
},
]
}
};
11.接下来测试一下开发环境是否搭建完成.
打开 app.js, 修改内容为:
// app.js

import $ from ‘jquery’;
import React from ‘react’;
import { render } from ‘react-dom’;

class HelloWorld extends React.Component {
render() {
return (

Hello World

);
}
}

render(, $(’#content’)[0]);
这里组件 HelloWorld 被装载到 id 为 content 的 DOM 元素, 所以相应的需要修改 index.html .

接下来执行webpack打包并打开index.html文件查看打包编译情况

这里贴出package.json配置：