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'], // 抽离路径 相对于dist filename: '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 }),