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' ] }