1、新建并初始化项目
mkdir react-demo && cd react-demo
npm init -y
2、安装全局 webpack
、webpack-cli
和 局部 webpack
、 webpack-cli
npm install webpack webpack-cli -g
npm install webpack webpack-cli --save-dev
3、项目根目录新建 webpack.config.js
文件
const path = require('path');
module.exports = {
entry: './src/main.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
4、安装并配置 html-webpack-plugin
插件
npm install html-webpack-plugin --save-dev
webpack.config.js文件:
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin()
]
5、安装并配置 babel-loader
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
webpack.config.js文件:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
}
6、 react
安装配置
npm install react react-dom --save
src/main.jsx文件:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
return (
<div>
<h1>This is a test</h1>
<p>The paragraph is a React test.</p>
</div>
)
}
}
ReactDOM.render(<App />, document.body)
7、sass环境配置
npm install style-loader css-loader node-sass sass-loader --save-dev
webpack.config.js文件:
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
8、编译项目
package.json文件:
"scripts": {
"build": "webpack"
}
然后命令行输入:
npm run build
会自动生成 dist目录以及相应的文件。
9、安装 webpack-dev-server
,实时刷新网页
npm install webpack-dev-server --save-dev
webpack.config.js文件:
devServer: {
contentBase: './dist'
}
package.json文件:
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
}