A, entry

1, the string:'./src/index.js'

Single entry

Pack up to form a chunk. Output a bundle file named main by default

2, array:['./src/index.js','./src/**.js']

Multiple entry

Bundle into a chunk and output a bundle file

3, the object

Multiple entry

entry:{
	index:'./src/index.js'
	add:'./src/add.js'
}
Copy the code

Several import files form several chunks and output multiple bundle files

In this case, the name of chunk is key

4. Special usage

entry:{
	// All entries will eventually form a chunk and output a bundle
	index: ['./src/index.js'.'./src/count.js']
	// Form a chunk and export a bundle file
	add:'./src/add.js'
}
Copy the code

Second, the output

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
	entry:'./src/index.js'.output: {// Specify the file name and directory
		filename:'./js/[name].[cententhash:10].js'.// Output file directory (all resources)
		path:resolve(__dirname,'build'),
		// All resources introduce a common path prefix
		publicPath:'/'.// The name of the non-entry chunk
		chunkFilename:'js/[name]_chunk.js'.// The entire library is exposed to the variable name
		library:'[name]'
		// Add the variable name to that
		libraryTarget:'window'
	},
	plugins: [new HtmlWebpackPlugin()
	],
	mode:'development'
}
Copy the code

Third, the module

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
	entry:'./src/index.js'.output: {filename:'./js/[name].[cententhash:10].js'.path:resolve(__dirname,'build'),},module: {rules: [/ / a loader configuration
			{
				test:/\.css$/.// Multiple loaders use use
				use:['style-loader'.'css-loader'] {},test:/\.js$/
				// Single loader uses loader
				loader:'eslint-loader'.// Remove js files from node-module
				exclude:/node-modules/.// check only the js files under SRC
				include:resolve(__dirname,'src'),// Execute 'post' first, defer execution
				enforce:'pre'.// Specify loader to be configured
				options: {}}, {// Only one of the following configurations takes effect
				oneOf: []}},plugins: [new HtmlWebpackPlugin()
	],
	mode:'development'
}
Copy the code

Four, resolve

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
	entry:'./src/index.js'.output: {filename:'./js/[name].[cententhash:10].js'.path:resolve(__dirname,'build')},plugins: [new HtmlWebpackPlugin()
	],
	mode:'development'.// Parse the module's rules
	resolve: {// Configure the path alias of the resolution module. Advantage: short path, disadvantage: no prompt for path
        alias: {$css:resolve(__dirname,'src/css')},// Omit file path suffix
        extensions: ['.js'.'json'].// Tell Webpack to go to that directory
        modules:[resolve(__dirname,'.. /.. /node_modules'),'node_modules']}}Copy the code

Fifth, devServer

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
	entry:'./src/index.js'.output: {filename:'./js/[name].[cententhash:10].js'.path:resolve(__dirname,'build')},plugins: [new HtmlWebpackPlugin()
	],
	mode:'development'.devServer: {// The directory to run the codeContentBase: resolve (__dirname,'build'),
		// Monitor all files in the contentBase directory and repackage them if they change
		watchContentBase:true.//
		watchOptions: {// Ignore the file
			ignored:/node-modules/
		},
		// Start gzip compression
		compress:true./ / the port numberPort:3000./ / domain name
		host:'localhost'.// Automatically open the browserOpen:true.// Enable HMRHot:true.// Do not display startup service logs
		clientLogLevel:'none'.// Do not display anything except basic startup information
		quiet:true.// If something goes wrong, do not display it in full screen
		overlay:false.// Server proxy, to solve the development environment cross domain problems
    	proxy: {// Once devServer(3000) receives/API/XXX request, it forwards the request to another server (3000).
    		'./api': {target:'http://localhost:5000'.// the request path is again: / API/XXX --> / XXX (remove/API)
    			pathRewrite: {'^/api':' '
    			}
    		}
		}
	}
}
Copy the code

Six, optimization

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.export = {
	entry:'./src/index.js'.output: {filename:'./js/[name].[cententhash:10].js'.path:resolve(__dirname,'build')},plugins: [new HtmlWebpackPlugin()
	],
	mode:'production'.optimization: {splitChunks: {chunks:'all'
		},
		// Package the hash of the current module into a single file runtime
		// Resolve: Modifying file A causes contenthash of file B to change
		runtimeChunk: {name:entrypoint= > `runtime-${entrypoint.name}`
		},
		minimizer: [// To configure the production environment compression scheme: JS and CSS
			new TerserWebpackPlugin({
				// Enable caching
				cache:true.// Enable multi-process packaging
				parallel:true./ / start the source - the map
				sourceMap:true}}})]Copy the code