欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack管理资源

程序员文章站 2022-06-18 23:36:31
加载Css webpack并不能处理js以外的静态资源,通过loader来支持他们 加载图片 file loader可以处理图片资源,字体资源 加载数据 ......

加载css

webpack并不能处理js以外的静态资源,通过loader来支持他们

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

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

加载图片

file-loader可以处理图片资源,字体资源

npm install --save-dev file-loader


  import _ from 'lodash';
  import './style.css';
+ import icon from './icon.png';

  function component() {
    var element = document.createelement('div');

    // lodash,现在由此脚本导入
    element.innerhtml = _.join(['hello', 'webpack'], ' ');
    element.classlist.add('hello');

+   // 将图像添加到我们现有的 div。
+   var myicon = new image();
+   myicon.src = icon;
+
+   element.appendchild(myicon);

    return element;
  }

  document.body.appendchild(component());
  
//css里面引入也是没问题的
  .hello {
    color: red;
+   background: url('./icon.png');
  }
  
   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'
+         ]
+       }
      ]
    }
  };

加载数据

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

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