加载Css
webpack并不能处理js以外的静态资源，通过loader来支持他们
npm install --save-dev style-loader css-loader
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};加载图片
file-loader可以处理图片资源，字体资源
npm install --save-dev file-loader
import _ from 'lodash';
import './style.css';
+ import Icon from './icon.png';
function component() {
var element = document.createElement('div');
// Lodash，现在由此脚本导入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
+ // 将图像添加到我们现有的 div。
+ var myIcon = new Image();
+ myIcon.src = Icon;
+
+ element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
//css里面引入也是没问题的
.hello {
color: red;
+ background: url('./icon.png');
}
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
+ {
+ test: /.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};加载数据
npm install --save-dev csv-loader xml-loader
{
+ test: /.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
