->1
首先新建一个干净的项目文件夹，进入文件夹执行"npm init"，一路回车创建一个package.json文件，然后创建一个"src"文件夹，用来存放项目文件
完成准备工作后开始安装webpack：
npm install webpack webpack-cli webpack-dev-server -s -D
安装完成后在当前目录下新建一个webpack.config.js文件，用来配置webpack，打开文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
注意这个时候还没配置react相关loader，并不能编译jsx文件，所以在src下新建一个index.js文件写上“hello world”看是否能够成功编译，此时需要加上两条npm命令start和build：
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
}
运行npm run build将会生成一个dist目录，然后有一个被webpack编译过的js文件，此时在创建一个public文件夹，里面放入一个入口文件模板，比如叫index.html,内容如下（可自由发挥，仅示例）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在安装两个webpack插件：
npm i html-webpack-plugin clean-webpack-plugin -s -D
webpack添加配置如下：
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'welcome',
template: './public/index.html'
})
]
这个时候执行“npm start”将会打开一个本地server，到此第一步完成了,此时项目目录应当如下：
-|--node_modules
|--pubilic-|-index.html
|--src-|-index.js
|--package.json
|--webpack.config.js
->2
开始配置loader转译react文件：
npm i -D babel-loader @babel/core @babel/preset-env babel-polyfill babel-preset-react
安装完后新建“.babelrc”文件，配置如下：
{
"presets": [
"env",
"react"
]
}
webpack.config.js添加loader信息如下：
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/
}
]
}
这个时候就可以把src下的index.js文件修改为jsx文件了，接下来安装react及react-dom：
npm install react react-dom
安装完毕后，index.jsx文件里就可以自由书写react语法了，如：
import React from "react"
import ReactDOM from "react-dom"
class App extends React.Component {
render() {
return <div>hello world</div>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
执行npm start打开浏览器就可以看到hello world了
网友评论