For better maintenance code, webpack.config.js is broken down into three parts: Put the configuration required by the development environment into the webpack.dev.js production environment configuration: Put the relevant configuration required by the production environment into webpack.prod.js

Install YARN add webpack-merge –dev or NPM I webpack-merge -d

Production file environment webpack.pro.js

const webpack = require('webpack'); 
const path = require('path'); 
const merge = require('webpack-merge');
const DIST_PATH = path.resolve(__dirname, './dist/'); 
const commonConfig = require('./webpack.common.js'); 
module.exports = merge(commonConfig, { 
    // mode: 'production',
    mode:'development'.output: { 
        path: DIST_PATH, // Where is the created bundle generated
        filename: '[name].[chunkhash:8].js'.// The name of the bundle created
     }, 
    // Set the Webpack mode
    plugins: []})Copy the code

Develop the file environment webpack.dev.js

const webpack = require('webpack'); 
const path = require('path'); 
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); 
const DIST_PATH = path.resolve(__dirname, './dist/'); 

module.exports = merge(commonConfig, { 
    mode: 'development'.// Set the Webpack mode
    // Related plug-in configuration required in the development environment
    output: { 
        path: DIST_PATH, // Where is the created bundle generated
        filename: '[name].js'.// The name of the bundle created
     }, 
     
    plugins: [].// Development server
     devServer: { 
        hot: true.// Hot update without manual refresh
        contentBase: DIST_PATH,  // The path to the hot boot file
        host: '0.0.0.0'./ / host address
        port: 8080.// Server port
        historyApiFallback: true.// The function of this option is to use 404 all linked to index.html
        proxy: { 
        "/api": "http://localhost:3000" 
        // Proxy to the backend service address, intercepts all request addresses starting with API},useLocalIp: true 
        // open:true,
        // noInfo:true}})Copy the code

webpack.common.js

var webpack = require('webpack');
var path = require('path');
var glob = require("glob");

var DIST_PATH = path.resolve(__dirname, './dist');

// Import file
var SRC_PATH = path.resolve(__dirname, './src');
var newEntries = {};
// index:'./src/index.js',
// main:'./src/main.js'

// var files = glob.sync(path.join(SRC_PATH,'/*.js')); / / way
var files = glob.sync(SRC_PATH + '/*.js'); 2 / / way
files.forEach(function (file, index) {
  // var substr = file.split('/').pop().split('.')[0];
  var substr = file.match(/src\/(\S*)\.js/) [1];
  newEntries[substr] = file;
  // [\s]-- indicates that if there is a blank, it will match;
  // [\S]-- indicates that no blank is matched;

})

// declare /dist to be an absolute path
module.exports = {
  // Entry JS path
  // indicates which module Webpack should use as a starting point for building its internal dependency graph
  // entry: path.resolve(__dirname,'./src/index.js'), 
  // Support single file, multiple file packaging
  // entry: './ SRC /index.js', // Method one
  / / entry: ['. / SRC/index. Js', '. / SRC/main. Js'], / / method 2
  // entry: {
  // index:'./src/index.js',
  // main:'./src/main.js'
  / /},
  entry: newEntries,

  // Compile the output JS inbound path
  // Tell Webpack where to export the bundles it creates and how to name them
  output: {
    path: DIST_PATH, // Where is the created bundle generated
    // filename: '[name].[chunkhash:8].js', // The name of the created bundle
    filename: '[name].js'.// The name of the bundle created
  },
  // Module parsing
  module: {},/ / the plugin
  plugins: [],}Copy the code

Start the

"scripts": { "build": "webpack --config ./build/webpack.prod.js --mode production"."dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open"."test": "echo \"Error: no test specified\" && exit 1" },
Copy the code