文件引用
1.css文件导入
1.1使用介绍
webpack不支持直接导入样式文件,需要使用相应的loader才能导入和使用
css-loader //是webpack可以处理css文件
style-loader //将css-loader处理完的文件变成style标签插入header里面
安装
npm install --save-dev style-loader css-loader
1.2项目结构
- webpack-demo
- hello.js
- print.js
- style.css
- package.json
- package-lock.json
css文件内容
html,body{
padding: 0;
margin: 0;
}
body{
background-color: red;
}
导入方式
import printMe from './print.js';
import 'style-loader!css-loader!./style.css';
//在引用css loader之前必须经过css-loader的处理,且执行顺序必须如上,否则保错
function hello(str) {
printMe()
alert(str)
}
###1.3结果
![image-20190324210557691](/Users/ocean/Library/Application Support/typora-user-images/image-20190324210557691.png)
2.配置文件配置
后期可以使用配置文件处理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'
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
}
}
;