关于webpack的一些配置（内含一些报错的解决，比如项目在IE

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配置：

未完待续~

本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。