Build ES6 development environment and compile in real time

establish dist、public/index.html、src/index.js Contents and documents

Project directory

package.json

{
    
  "name": "es6-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

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: 'index.js',
  },
  devServer: {
    
		contentBase: './dist',
		host: 'localhost',
		port: 3000
	},
  plugins: [
    new HtmlWebPackPlugin({
    
      template: 'public/index.html',
      filename: 'index.html',
      inject: true,
    }),
  ],
  module: {
    
    rules: [
      {
    
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
    
        test: /\.js?$/, // jsx/js Regularization of files 
        exclude: /node_modules/, //  exclude  node_modules  Folder 
        use: {
    
          // loader  yes  babel
          loader: 'babel-loader',
          options: {
    
            // babel  Escape configuration options 
            babelrc: false,
            presets: [
              [require.resolve('@babel/preset-env'), {
     modules: false }],
            ],
            cacheDirectory: true,
          },
        },
      },
    ],
  },
}