webpack5中的一些注意事项（持续学习更新）

遇见bug

加载html图片失败问题
html-loader中也需要设置esModule: false，不然会无法展示图片

{
	test: /\.(jpg|png|gif)$/,
	use: [
			{
				loader: 'url-loader',
				options: {
					limit: 8 * 1024,
					esModule: false
				}
			}
	]  
}

{
	test: /\.(html)$/,
	use: {
		loader: 'html-loader',
		options: {
			esModule: false
		}
	}
}

npx webpack-dev-server命令无法启动devserver服务

	// 启动指令：npx webpack-dev-server
    // webpack5命令为：npx webpack serve
    devServer: {
        contentBase: resolve(__dirname,'build'),
        // 启动gzip压缩
        compress: true,
        // 端口
        port: 3000,
        // 自动打开浏览器
        open: true
    }

css无法兼容css

// 就写法
{
	loader: 'postcss-loader',
	options: {
		ident: 'postcss',
		plugins: () => [
			require('postcss-preset-env')()
		]
	}
}

// webpack5新写法
{
	loader: 'postcss-loader',
	ident: 'postcss',
	options: {
		postcssOptions: {
			plugins: [
				require('postcss-preset-env')()
			]
		}
	}
}

无法自动刷新，需添webpack.config下配置

target: 'web'

SplitChunk

// webpack4
minSize: 30000;

// webpack5
minSize: {
  javascript: 30000,
  style: 50000,
}