※项目使用上文webpack起步建立的项目
1)安装file-loader
npm install file-loader --save-dev
2)修改webpack.config.js,追加css模块加载规则
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: { // 添加模块加载规则
rules: [{
test: /\.(png|jpg|gif|svg)$/, // 要加载的文件后缀,无引号
use: [ // 使用的加载器
'file-loader'
]
}]
}
}
3)添加src/logo.jpg文件
4)修改src/index.js文件,使用logo.jpg文件
import _ from 'lodash';
import './style.css'; // 导入css文件
import logo from './logo.jpg'; // 导入图片文件
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], '--');
// 组件元素追加class样式
element.classList.add('hello');
// 加载图片
var image = new Image(400, 400);
image.src = logo;
element.appendChild(image);
return element;
}
document.body.appendChild(component());
5)编译查看结果
npm run build