Webpack 打包静态资源 图片

下载file-loader

在项目根路径局部安装file-loader

npm install file-loader --save-dev

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>
</html>

在index.js导入并使用jpg文件

import picture from './picture.jpg'

var image = document.createElement("img")
image.src = picture;
document.getElementById("root").append(image)

webpack配置 webpack.config.js

const path = require('path')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader'
            } 
        }]
    }
}
posted @ 2020-11-07 15:44  Toream学习笔记  阅读(147)  评论(0)    收藏  举报