webpack--指南2--管理资源

1：加载CSS

要想在JS模块种import一个CSS文件的话，需要在mudle配种安装并且添加style-loader和css-loader

npm install --save-dev style-loader css-loader

//webpack.config.jsmodule.exports={    entry:'./src/index.js',    output:{        filename:'bundle.js',        path:path.resolve(_dirname,'dist')    },    module:{        rules:[            {                test:/\.css&/,                use:[                    'style-loader','css-loader'                ]            }        ]    }}

在index,js文件中引入JS文件以后

import './style.css';

发现CSS文件跑到了head标签内，

2：加载图片

如果我们正在下载CSS，我们的背景和图标，要如何处理呢？使用file-loader，我们可以轻松的将这些内容混合到CSS中；

cnpm install --save-dev file-loader

module:{        rules:[            {                test:/\.css&/,                use:[                    'style-loader','css-loader'                ]            }.            {                test: /\.(png|svg|jpg|gif)$/,                use: [                    'file-loader'                ]            }        ]    }

这个时候不管是JS中引入的图片，还是CSS中的图片都会被转化

3：加载字体

file-loader和url-loader可以接受并加载任何文件，然后将其输出到构建目录；

4：加载数据

数据文件如json，CSV，TSV，XML；类似于nodeJS,JSON支持实际上是内置的，也就是说 import Data from ‘./data.json’默认将正常运行。要导入CSV ，TSV， XML，你可以使用csv-loader,xml-loader。

npm install --save-dev  csv-loader xml-loader

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