1.所需要的包
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"style-loader": "^0.23.1",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
cnpm i @babel/core @babel/preset-react babel-loader css-loader html-webpack-plugin react react-dom style-loader webpack webpack-cli webpack-dev-server -D
npm i @babel/core @babel/preset-react babel-loader css-loader html-webpack-plugin react react-dom style-loader webpack webpack-cli webpack-dev-server -D
2.babel配置
既可以在.babelrc文件中配置,也可以在package.json中配置,这里在package.json中配置
"babel":{
"presets":[
"@babel/preset-react"
]
}
3.webpack.config.js文件
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "public"),
filename: "index.js"
},
mode: "development",
devtool: "source-map",
devServer: {
contentBase: "./public",
port: 8666,
compress: true,
hot: true
},
plugins: [
new HtmlWebpackPlugin({
title: "Your Title",
template: "./src/index.html",
// favicon: "./favicon.ico",
inject: true
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.jsx$/,
loader: "babel-loader"
}
]
}
};
module.exports = config;
附:package.json
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"@babel/preset-react"
]
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.1.0",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"style-loader": "^0.23.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}