react + webpack安装配置

最新推荐文章于 2024-08-05 19:45:28 发布

weixin_33853794

最新推荐文章于 2024-08-05 19:45:28 发布

阅读量109

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://my.oschina.net/tongjh/blog/828209

版权

使用CDN库方式

<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>

react.min.js React核心库
react-dom.min.js 提供DOM相关的功能
browser.min.js 用于将JSX语法转为javascript语法

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
	    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
	    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/babel">
			ReactDOM.render(
				<h1>hello world</h1>,
				document.getElementById('app')
			);
		</script>
	</body>
	</html>

使用脚手架方式

我们使用webpack作为脚手架

安装webpack

npm init
npm install
npm install webpack
npm install webpack-dev-server --save-dev

安装react

npm install react --save
npm install react-dom --save

安装一些babel插件

npm install babel
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

创建一些必须的文件

touch index.html
touch App.jsx
touch main.js
touch webpack.config.js

配置webpack设置编译器、服务器、载入器

var path = require('path')
var webpack = require('webpack')

module.exports = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 7777
   },

   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',           
         query: {
            presets: ['es2015', 'react']
         }
      }]
   },

   plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin()
  ]

}

根目录新建index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>hello</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="index.js"></script>
   </body>
</html>

根目录新建mian.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

根目录新建App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            你好世界！！！
         </div>
      );
   }
}

export default App;

配置服务

打开package.json 找到scripts节点，插入

"scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack --progress --hide-modules"
 },

启动服务

npm start

转载于:https://my.oschina.net/tongjh/blog/828209

weixin_33853794

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react + webpack安装配置

使用CDN库方式<script src="http://...
复制链接

扫一扫