Ví dụ đã hoàn thành :)
Chú ý: Ta có thể viết gọn babel-loader
babel-loader như sau :))
C:\Users\Administrator\Desktop\abc\webpack.config.js
Trước
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
};
C:\Users\Administrator\Desktop\abc\webpack.config.js
Sau
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
};
C:\Users\Administrator\Desktop\abc.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
Đọc thêm
https://viblo.asia/p/reactjs-ket-hop-voi-webpack-part-1-Eb85ogr052G
https://viblo.asia/p/tu-setup-reactjs-project-co-ban-voi-webpack-4-va-babel-7-phan-1-63vKj2pxK2R
https://hashinteractive.com/blog/complete-guide-to-webpack-configuration-for-react/
C:\Users\Administrator\Desktop\webpack\package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"html-loader": "^1.3.1",
"html-webpack-plugin": "^4.5.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
}
}
C:\Users\Administrator\Desktop\webpack\webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Hoặc chúng ta có thể chỉnh định tên thư mục và file trong trường hợp này là public và bundle.js
var path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
output: {
path: path.resolve(__dirname, 'public'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
C:\Users\Administrator\Desktop\webpack\src\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
C:\Users\Administrator\Desktop\webpack\src\js\components\Form.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Form extends Component {
constructor() {
super();
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const { value } = event.target;
this.setState(() => {
return {
value
};
});
}
render() {
return (
<form>
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
</form>
);
}
}
export default Form;
const wrapper = document.getElementById("container");
wrapper ? ReactDOM.render(<Form />, wrapper) : false;
C:\Users\Administrator\Desktop\webpack\src\index.js
import Form from "./js/components/Form";
C:\Users\Administrator\Desktop\webpack.babelrc
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
