上次写的webpack配置只是一个非常简单的入门版本，实际上写漏了很多需要的东西，比如需要引入的jpg,png,svg还有一些字体文件，所以这次我再来补上。
图片与字体
这些模块依然只需要url-loader，所以我们只需要在loaders中加上这些模块的处理方式，可以为模块加载时添加hash值，这样在实际服务器上线的时候就不需要担心本地缓存干扰了服务器更新的问题。
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.(woff|woff2)$/,
loader: "url?prefix=font/&limit=5000"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
postcss
其实这个loader我也不是很会用，但是用这个来兼容各种浏览器的css前缀问题是很好的解决方案，我们将会用到它的autoprefixer功能，首先我们需要安装：
npm install postcss-loader autoprefixer --save-dev
我们在webpack配置文件开始时定义一个常量：
const AUTOPREFIXER_BROWSERS = [
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1'
];
在exports中增加选项：
postcss: [
autoprefixer({
browsers: AUTOPREFIXER_BROWSERS
})
],
在loader中添加：
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css!postcss')
},
或者也可以配合sass使用
{
test: /\.[s]?css$/,
loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
},
其中ExtractTextPlugin为一款css文件分离插件，你也可以不使用它。
vue-loader
在利用vuejs做开发的时候，肯定是需要利用vue-loader的，这样可以简化很多的开发步骤，不必要要写很多的html和js，只要写一个vue文件就可以了，loader：
{
test: /\.vue$/,
loader: 'vue'
}
加入vue配置选项：
vue: {
// configure autoprefixer
autoprefixer: {
browsers: ['last 2 versions']
},
loaders: {
css: ExtractTextPlugin.extract("css"),
// you can also include <style lang="less"> or other langauges
scss: ExtractTextPlugin.extract("css!sass")
}
},
配置vue文件的loader，我这边只是使用的scss，你可以使用jade，cofferscript等等，而且我这里依然使用了css文件分离插件。
Uglify
这是webpack自带的插件，可以压缩css文件和js文件。
使用命令
webpack -p
可以使用这款插件，但是会弹出很多警告，所以我们在配置文件中plugins中配置：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
})
这样可以关闭警告也可以除去文件中的注释选项。