Webpack2 完整踩坑教程(六)

最新推荐文章于 2025-12-07 19:10:08 发布

转载最新推荐文章于 2025-12-07 19:10:08 发布 · 383 阅读

文章标签：

#webpack2

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Webpack加载图片资源，并通过file-loader实现图片模块化管理。文中详细展示了配置过程及代码示例，包括如何设置sourcemap、安装并配置file-loader加载器，以及在项目中实际使用这些图片。

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

六.用file-loader加载图片（用于处理图片及JS 、 CSS等文件）

1.在webpack.config.js的添加devtool:’source-map’ ，用于在打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置

2.在src目录内新建img文件夹，复制二张图片进来供测试用。

3.在src目录内新建face.js文件

const face=require('./img/face.png'); const Image=`<img src="${face}">`; export default Image;

4.在src目录内新建content.js文件

const content=require('./img/content.png'); const Image=`<img src="${content}">`; export default Image;

5.安装文件加载器 npm install file-loader –save-dev

6.修改webpack.config.js文件，添加file-loader加载器

... module.exports={ entry:entry,//入口文件 plugins:plugins, module: { loaders:[ { test: /\.js$/, loaders: ["babel-loader"], exclude: "./node_module/" }, { test: /\.(png|jpg|gif)$/, loaders: ["file-loader"], exclude: "./node_module/" } ] }, ... ...

7.修改index.js，通过import加载图片到页面

import face from ‘./face’;
import content from ‘./content’;
var newMessage=()=>(

` <p>${face} ${content}</p>`
   1
   
    
   
   1

);
var app=document.getElementById(‘app’);
app.innerHTML=newMessage();
if(module.hot){//启用热重载
module.hot.accept();
}