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

1：加载CSS

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

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

//webpack.config.js
module.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'
         ]
}