省略扩展名

配置好扩展名数组后，导入的路径就可以省略扩展名。

注意：如果package.json的type指定为module，则此配置无效，必须要写明扩展名

resolve: {
  extensions: ['.js', '.json', '.wasm'],
},

例如

import { a } from "./src/a.js";
// 省略扩展名
import { a } from "./src/a";

webpack会根据extensions 数组中的扩展名，按顺序尝试解析。

路径别名

用过vue的应该都知道，可以用@指代src目录路径

import { a } from "./src/a.js";
// 可以用@替代
import { a } from "@/a.js";

其实这是配置webpack实现的，我们可以通过配置resolve.alias来指定任意路径别名

resolve: {
	alias: {
		"@": join(__dirname, "src"),
		"@views": join(__dirname, "src/views"),
	},
},

配置好后使用路径别名是可以正常运行的，但是在编码时却看不到编辑器(vscode)的路径提示了，我们可以通过jsconfig.json或者tsconfig.json解决。

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"],
			"@views/*": ["./src/views/*"]
		}
	}
}

jsconfig文件官方介绍[jsconfig.json Reference (visualstudio.com)](https://code.visualstudio.com/docs/languages/jsconfig#:~:text=The presence of jsconfig.json file in a directory,you do not need to worry about jsconfig.json.)

自动添加css前缀

webpack可以自动配置各大浏览器厂商的css前缀，这需要使用到postcss。

要使用这个功能，你需要安装css后置处理器postcss、postcss-loader以及插件autoprefixer

npm install  postcss-loader postcss autoprefixer -D

rules: [
			{
				test: /\\.css$/,
				exclude: [join(__dirname, "./node_module")],
				use: [
					"style-loader",
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: ["autoprefixer"],
							},
						},
					},
				],
			},
		],