webpack 打包CSS 引入图片

加载css

安装style-loader， css-loader

npm install style-loader css-loader --save-dev

配置webpack.config.js文件
```
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
```
引入css到 js 中，然后在html引用该 js，完美
```
import css from './style.css';

function hello(str){

document.getElementById('app').innerHTML = str;

console.log(str);

}

hello('hello world! 我的天啊 这可咋整啊 好可怕啊啊啊啊');

然后执行 ` npm run dev ` 进行打包  OK
![](https://images2018.cnblogs.com/blog/1321525/201807/1321525-20180730224902619-115195038.png)

## 加载图片
安装url-loader, file-loader
> npm install url-loader file-loader --save-dev

<br >
配置webpack.config.js文件

module: {

rules: [

{

test: /.css\(/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|svg|jpg|gif)\)/,

use: [

{

loader: 'url-loader',

options: {

outputPath: 'image/', // 指定图片输入的文件夹

publicPath: '../dist/image/', // 指定获取图片的路径

limit: 500,

name: '[name].[hash:8].[ext]' // 输入的图片名

}

}

]

}

]

}

然后执行 ` npm run dev ` 进行打包  OK

![](https://images2018.cnblogs.com/blog/1321525/201807/1321525-20180730223722041-489932413.png)
<br >