前面我们搭建好路webpack基础,现在我们打算集成下react
首先安装react:
同样使用局部安装
npm install --save-dev react react-dom
再安装webpack相关支持
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
然后继续我们的hello world
修改index.jx
引入react
import React from 'react';
import ReactDOM from 'react-dom';
webpack.config.js加入react配置
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
query: {
presets: ["es2015", "react"],
}
},
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './js/index.js',
},
devtool: 'inline-source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
include: path.resolve(__dirname, 'scss'),
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
query: {
presets: ["es2015", "react"],
}
},
]
}
};
经典的hello world
在index.js加入代码:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
html页面做相应修改
<div id="app"></div>
<script src="{{ url_for('static', filename='dist/app.bundle.js') }}"></script>
打包:npm run build