13 Webpack 资源文件引入

加载 CSS

如果我们要import './style.css'，需要安装 style-loader 和 css-loader：

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

 

加载图片

如果我们的css中存在背景和图标这些图片，那么我们需要安卓 file-loader

npm install --save-dev file-loader

这样我们可以使用 import MyImage from './my-image.png'，url('./my-image.png')，<img src="./my-image.png" />等语法

 

加载字体

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

 

加载数据

要加载如 JSON 文件，CSV、TSV 和 XML等数据。

NodeJS支持JSON的加载

CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

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

 

最终webpack.config.js配置如下

  const path = require('path');

 

  module.exports = {

    entry: './src/index.js',

    output: {

      filename: 'bundle.js',

      path: path.resolve(__dirname, 'dist')

    },

    module: {

      rules: [

        {

          test: /\.css$/,

          use: [

            'style-loader',

            'css-loader'

          ]

        },

        {

          test: /\.(png|svg|jpg|gif)$/,

          use: [

            'file-loader'

          ]

        },

        {

          test: /\.(woff|woff2|eot|ttf|otf)$/,

          use: [

            'file-loader'

          ]

        },

+       {

+         test: /\.(csv|tsv)$/,

+         use: [

+           'csv-loader'+         ]

+       },

+       {

+         test: /\.xml$/,

+         use: [

+           'xml-loader'

+         ]

+       }

      ]

    }

  };

 

指定资源文件输出路径

{

          test: /\.(png|svg|jpg|gif)$/,

          use: [

            {

                    loader: 'file-loader',

                    options:{

                        name: '/images/[hash].[ext]'

                    }

            }

          ]

},

 

 

示例：

index.html

<div class="webpack"></div>

 

index.css

.webpack {

    background: url(../img/webpack.png) no-repeat center;

    height:500px;

}

 

index.js 引入css

require('../css/index.css');

执行webpack指令

查看生成的目录结构