webpack工程化——资源分类（转，待更新）

1.加载CSS文件（/i是忽略大小写）

安装css-loader和style-loadernpm install --save-dev style-loader css-loader
修改webpack.config.js

module: {
   rules: [
     {
	     test: /\.css$/i,
	     use: ['style-loader', 'css-loader'],
     },
   ],
},

因为是链式调用loader，所以style-loader和css-loader顺序一定是图上所示

2.加载image图像文件

{
	test: /\.(png|svg|jpg|jpeg|gif)$/i,
	type: "asset/resource",
},

3.加载fonts字体文件

{
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
},

4.加载数据文件

安装csv-loader和xml-loadernpm install --save-dev csv-loader xml-loader

{
    test: /\.(csv|tsv)$/i,
    use: ['csv-loader'],
},
{
    test: /\.xml$/i,
    use: ['xml-loader'],
},

5.将任何 toml、yaml 或 json5 文件作为 JSON 模块导入

安装csv-loader和xml-loadernpm install toml yamljs json5 --save-dev

{
	test: /\.toml$/i,
	type: 'json',
	parser: {
	  parse: toml.parse,
	},
},
{
	test: /\.yaml$/i,
	type: 'json',
	parser: {
	  parse: yaml.parse,
	},
},
{
	test: /\.json5$/i,
	type: 'json',
	parser: {
	  parse: json5.parse,
	},
},

6.全局资源（增加代码可移植性，参考微信小程序包结构）

 |– /components
 |  |– /my-component
 |  |  |– index.jsx
 |  |  |– index.css
 |  |  |– icon.svg
 |  |  |– img.png

假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装过全部 外部依赖 ，并且 已经在配置中定义过相同的 loader ，那么项目应该能够良好运行。