In this article, let's create a React template project, it involves ReactJS, Webpack.
https://github.com/markliu2013/react-template-js
Create a folder and initialize NPM
npm init -y
Install React
npm i react react-dom
Install Webpack
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
Create src folder and index.html, App.jsx, index.js
Install babel-loader
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
Create file babel.config.json
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
Create file webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js' // the name of the bundle
},
// import App from './App';
resolve: {
modules: [__dirname, 'src', 'node_modules'],
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // to import index.html file inside index.js
})
],
devServer: {
port: 3036 // you can change the port
},
module: {
rules: [
{
test: /\.(js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
};
Top comments (0)