Webpack基本配置详解

一、entry

1、string：'./src/index.js'

单入口

打包形成一个chunk。输出一个bundle文件，默认名为main

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

多入口

打包形成一个chunk，输出一个bundle文件

3、object

多入口

entry:{
	index:'./src/index.js'
	add:'./src/add.js'
}

有几个入口文件就形成几个chunk，输出多个bundle文件

此时chunk得名称是key

4、特殊用法

entry:{
	//所有得入口最终会形成一个chunk，输出一个bundle文件
	index:['./src/index.js','./src/count.js']
	//形成一个chunk，输出一个bundle文件
	add:'./src/add.js'
}

二、output

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'),
		//所有资源引入公共路径前缀
		publicPath:'/'，
		//非入口chunk得名称
		chunkFilename:'js/[name]_chunk.js',
		//整个库向外暴露得变量名
		library:'[name]'
		//变量名添加到那个上
		libraryTarget:'window'
	},
	plugins:[
		new HtmlWebpackPlugin()
	],
	mode:'development'
}

三、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:[
			//loader配置
			{
				test:/\.css$/,
				//多个loader用use
				use:['style-loader','css-loader']
			},
			{
				test:/\.js$/
				//单个loader用loader
				loader:'eslint-loader'，
				//排除node-module下得js文件
				exclude:/node-modules/，
				//只检查src下面得js文件
				include:resolve(__dirname,'src')，
				//优先执行   'post',延后执行
				enforce:'pre',
				//指定loader得配置
				options:{
				
				}
			},
			{
				//以下配置只会生效一个
				oneOf:[]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin()
	],
	mode:'development'
}

四、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',
	//解析模块得规则
	resolve:{
		//配置解析模块路径别名,优点：简写路径，缺点：路径没有提示
        alias:{
			$css:resolve(__dirname,'src/css')
        }，
        //配置省略文件路径得后缀名
        extensions:['.js','json'],
        //告诉webpack解析模块是去那个目录找
        modules:[resolve(__dirname,'../../node_modules'),'node_modules']
	}
}

五、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:{
		//运行代码得目录
		contentBase：resolve(__dirname,'build'),
		//监视 contentBase 目录下得所有文件，一旦文件发生变化就会重新打包
		watchContentBase:true,
		//
		watchOptions:{
			//忽略文件
			ignored:/node-modules/
		},
		//启动gzip压缩
		compress:true,
		//端口号
		port：3000,
		//域名
		host:'localhost',
		//自动打开浏览器
		open：true,
		//开启HMR功能
		hot：true,
		//不要显示启动服务日志
		clientLogLevel:'none',
		//除了一些基本启动信息意外，其他内容都不要显示
		quiet:true，
		//如果出错，不要全屏提示
		overlay:false,
    	//服务器代理，解决开发环境跨域问题
    	proxy:{
    		//一旦devServer(3000)服务器接收到 /api/xxx 得请求，就会把请求转发得另一个服务器上(3000)
    		'./api':{
    			target:'http://localhost:5000'，
    			//发送请求时，请求路径重新：将 /api/xxx   ---> /xxx  (去掉/api)
    			pathRewrite:{
    				'^/api':''
    			}
    		}
		}
	}
}

六、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'
		},
		//将当前模块记录其他模块得hash单独打包为一个文件 runtime
		//解决：修改a文件导致b文件得contenthash变化
		runtimeChunk:{
			name:entrypoint => `runtime-${entrypoint.name}`
		},
		minimizer:[
		//配置生产环境得压缩方案：js和css
			new TerserWebpackPlugin({
				//开启缓存
				cache:true,
				//开启多进程打包
				parallel:true,
				//启动source-map
				sourceMap:true
			})
		]
	}
}