demo__image_loader

环境

webpack4.x

文件结构

│  package.json
│  webpack.config.js
│  yarn.lock
│
├─dist
│      1f871aa58.png
│      bundle.js
│      index.html
│
├─node_modules
└─src
    ├─img
    │      1.png
    │
    └─js
            app.js

文件内容（app.js）

//创建img标签，并使用引入的图片文件
let src = require('../img/1.png');
let img = new Image();
img.src = src;
img = document.querySelector("body").appendChild(img);

方法1：file-loader

package.json

{
  "name": "file",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "file-loader": "^4.0.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/js/app.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.join(path.resolve(__dirname), 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name][hash:8].[ext]'
                }
            }
        }]
    }
};

方法2：url-loader(生成文件的话需要file-loader)

package.json

{
  "name": "file",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "file-loader": "^4.0.0",
    "url-loader": "^2.0.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

webpack.config.js

const path = require('path');

module.exports = {    entry: {        app: './src/js/app.js'    },    output: {        filename: 'bundle.js',        path: path.join(path.resolve(__dirname), 'dist')    },    mode: 'development',    module: {        rules: [            {                test: /\.(jpg|png|gif)$/,                use : {                    loader : 'url-loader',                    options : {                        limit : 2 * 1024,                         name: '[name][hash:8].[ext]'                    }                }            }]    }};

打包（打开index.html可以看见图片）

npx webpack