1. 编译完成后自动打开浏览器
方法一：（实际上比较麻烦）
webpack.dev.conf.js中：
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
plugins: [
new OpenBrowserPlugin({url: 'http://localhost:8080'}),
]
方法二：
index.js中配置 autoOpenBrowser:true
2. 设置开发过程中才输出log日志
法一：
如果使用 UglifyJsPlugin 插件来压缩代码，加入如下配置，即可移除掉代码中的 console，在webpack.prod.conf.js中plugins中找到对应的插件配置：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
//生产环境，压缩混淆并移除console
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: true
}),
法二：
webpack.dev.conf.js中：
plugins: [
new webpack.DefinePlugin({
IS_DEV: JSON.stringify(true),
}),
]
生产环境webpack.dev.prod.js中：
plugins: [
new webpack.DefinePlugin({
IS_DEV: JSON.stringify(false),
}),
]
使用：
if( IS_DEV){
console.log('xxx')
}
3. 配置scss
vue提供了初始化的webpack模板，其中使用了vue-loader。vue-loader默认只支持sass, 要是想要使用scss，必须安装node-sass和sass-loader：
cnpm install node-sass sass-loader --save--dev
webpack.base.conf.js中：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
/* scss: ['vue-style-loader','css', 'sass'].join('!')*/
}
}
},
然后在.vue格式的模板中，style 标签中添加 lang='scss' 就可以了。
4.配置px转rem
cnpm install postcss-px2rem --save--dev
vue-loader.conf.js中：
postcss:[
require('postcss-px2rem')({
remUnit:10
})
],
5. IE下运行项目为空白页面
报错原因：IE浏览器没有内置Promise对象，实际几乎所有的ES6新增方法在IE都不能用。
解决方法：
1.安装babel Polyfill依赖：npm install --save babel-polyfill
2.修改build/webpack.base.config.js的entry配置：
未完待续~
本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。
