创建文件
创建/.babelrc
//.babelrc
{
"presets": [
"react",
"env"
]
}
创建webpack.config.js
//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
context: path.resolve(__dirname, 'app'),
resolve: {
modules: [
path.resolve(__dirname, 'node_modules')
]
},
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'), //打包后的js文件存放的地方
filename: 'app.js',
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}],
},
{
test: /index\.html/,
use: [{
loader: 'file-loader',
options: {
name (file) {
return 'index.[ext]'
}
}
}]
}
]
},
};
创建/app/component/App.js
import React from 'react';
import Header from './Header';
import Content from './Content';
import Sidebar from './Sidebar';
class App extends React.Component {
render() {
return (
<div className="app">
<Header/>
<Sidebar/>
<Content/>
</div>
)
}
}
export default App;
创建/app/component/Header.js
import React from 'react';
class Header extends React.Component {
render() {
return (
<div>this is header</div>
)
}
}
export default Header;
创建/app/component/Sidebar.js
import React from 'react';
class Sidebar extends React.Component {
render() {
return (
<div className="sidebar">
this is sidebar
</div>
)
}
}
export default Sidebar;
创建/app/component/Content.js
import React from 'react';
class Content extends React.Component {
render() {
return (
<div className="content">
this is content
</div>
)
}
}
export default Content;
创建/app/app.js入口文件
import './index.html';
import React from 'react';
import ReactDom from 'react-dom';
import App from './component/App';
ReactDom.render(
<App/>, document.getElementById('root')
);
创建/app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="root"></div>
<script src="./app.js"></script>
</body>
</html>
执行webpack打包
<!--控制台执行webpack会在/dist中生成一个app.js和index.html-->
webpack
开启本地服务器
修改webpack.config.js
//webpack-dev-server配置
devServer: {
contentBase: './dist',//为一个目录下的文件提供本地服务器，在这里设置其所在目录
historyApiFallback: true,//跳转将指向index.html
inline: true,//源文件改变,会自动刷新页面
port: 1234,//设置默认监听端口，如果省略，默认为"8080"
},
修改package.json
"scripts": {
"start": "webpack-dev-server"
},
执行start
npm start
image
之后再浏览器中输入localhost:1234,可以看到显示hello world!
网友评论