webpack Asset Management(css,图像,字体等文件的载入)

习前了解:

element.classList属性用于返回一个元素的className集合
并且该属性拥有add，remove，toggle，contains方法
add用于给元素添加新的类名

1.js中获取css文件

webpack环境下:通过import从JavaScript模块中获取CSS文件，您需要安装style-loader和css-loader并将其添加到module配置中。

npm install --save-dev style-loader css-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',
         ],
       },
     ],
   },
  };

2.js载入图像

npm install --save-dev file-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',
         ],
       },
      ],
    },
  };

3.js加载不同类型文件数据

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

1.例如JSON文件，CSV，TSV和XML
2.对json的支持是内置的

4.总结

webpack通过npm安装不同loder在js中加载不同类型的文件,通过import将文件和loader进行捆绑,使每个模块都明确声明其依赖性，并且我们将避免捆绑未使用的模块。

5.以上引用于(详细可见下):

https://webpack.js.org/guides/asset-management/