webpack实用配置

注意：以下内容是在vue-cli脚手架的基础上进行添加！

 

1、单个文件抽离

webpack.base.conf.js里边的webpackConfig={}里边对入口文件进行配置，输入你想要抽离的文件，比如vux这个ui框架很大，很有必要抽离

entry: {app: './src/main.js',vue: 'vue',vux: 'vux',vuex: 'vuex',vueRouter: 'vue-router'}

webpack.prod.conf.js里边配置plugs插件  官方文档：https://webpack.js.org/plugins/uglifyjs-webpack-plugin/#uglifyoptions

new webpack.optimize.CommonsChunkPlugin({// name对应入口文件，入口文件单独抽离name: ['vue', 'vux', 'vuex','vue-router'],// 抽离路径 相对于distfilename: 'assets/js/[name].js',// filename:'assets/js/[name].[ext]',// 最小抽离两个文件  这个目前不懂什么意思，但是必须写！一般都写2就可以了minChunks: 2})

以上为配置即可进行抽取文件

 

2、生产环境打包时去掉console debug？

在webpack.prod.conf.js里边配置已有plugs插件

new webpack.optimize.UglifyJsPlugin({compress: {warnings: false, // 已有drop_debugger: true, // 新增drop_console: true // 新增},sourceMap: true}),