npm install commands

$ npm i --save-dev react react-dom webpack webpack-dev-server html-webpack-plugin babel-loader style-loader css-loader @babel/core @babel/preset-env @babel/preset-react webpack-cli

add babel.config.json

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

add webpack.config.js

     const hwp = require('html-webpack-plugin')
    const path = require('path')

    module.exports = {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module:{
            rules:[
                {
                    test: /\.jsx?$/,
                    include: path.resolve(__dirname, 'src'),
                    exclude : "/node_modules",
                    loader: "babel-loader"
                },
                {
                    test: /\.css/,
                    loader: ["style-loader", "css-loader"]
                }
            ]
        },
        plugins: [
            new hwp({
                template: "./src/template.html"
            })
        ],
        devServer:{
            open: "chrome"
        }
    }
Categories: web

0 Comments

Leave a Reply

Your email address will not be published.