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 >