webpack可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件

准备

dist/index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8" />
  5. -    <title>起步</title>
  6. +    <title>管理资源</title>
  7.    </head>
  8.    <body>
  9. -    <script src="main.js"></script>
  10. +    <script src="bundle.js"></script>
  11.    </body>
  12.  </html>

webpack.config.js

  1.  const path = require('path');
  3.  module.exports = {
  4.    entry: './src/index.js',
  5.    output: {
  6. -    filename: 'main.js',
  7. +    filename: 'bundle.js',
  8.      path: path.resolve(__dirname, 'dist'),
  9.    },
  10.  };
  11. 加载

加载CSS

添加loader

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

webpack.config.js

  1.  const path = require('path');
  3.  module.exports = {
  4.    entry: './src/index.js',
  5.    output: {
  6.      filename: 'bundle.js',
  7.      path: path.resolve(__dirname, 'dist'),
  8.    },
  9. +  module: {
  10. +    rules: [
  11. +      {
  12. +        test: /\.css$/i,
  13. +        use: ['style-loader', 'css-loader'],
  14. +      },
  15. +    ],
  16. +  },
  17.  };

Tip webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

project

  1.   webpack-demo
  2.   |- package.json
  3.   |- webpack.config.js
  4.   |- /dist
  5.     |- bundle.js
  6.     |- index.html
  7.   |- /src
  8. +   |- style.css
  9.     |- index.js
  10.   |- /node_modules
  12. style/style.css
  13. .hello {
  14.   color: red;
  15. }

src/index.js

  1.  import _ from 'lodash';
  2. +import './style.css';
  4.  function component() {
  5.    const element = document.createElement('div');
  7.    // Lodash, now imported by this script
  8.    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  9. +  element.classList.add('hello');
  11.    return element;
  12.  }
  14.  document.body.appendChild(component());

npm run build

image.png

加载images图像

webpack.config.js

  1. module: {
  2.    rules: [
  3.      、、、
  4.     {
  5.       test: /\.(png|svg|jpg|jpeg|gif)$/i,
  6.       type: 'asset/resource',
  7.     },
  8.    ],
  9. },

project

  1.   |- /src
  2. +   |- icon.png

src/index

  1.  import _ from 'lodash';
  2.  import './style.css';
  3. +import Icon from './icon.png';
  5.  function component() {
  6.    const element = document.createElement('div');
  8.    // Lodash, now imported by this script
  9.    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  10.    element.classList.add('hello');
  12. +  // 将图像添加到我们已经存在的 div 中。
  13. +  const myIcon = new Image();
  14. +  myIcon.src = Icon;
  16. +  element.appendChild(myIcon);
  18.    return element;
  19.  }
  21.  document.body.appendChild(component());

src/style.css

  1.  .hello {
  2.    color: red;
  3.  + background: url('./icon.png');
  4.  }

npm run build

如果一切顺利，你现在应该看到你的 icon 图标成为了重复的背景图，以及 Hello webpack 文本旁边的 img 元素。如果检查此元素，你将看到实际的文件名已更改为 29822eaa871e8eadeaa4.png。这意味着 webpack 在 src 文件夹中找到我们的文件，并对其进行了处理！