将webpack的vue项目整改为vue-cli

如何将webpack配置webpack.base.js+webpack.dev.js+webpack.prod.js合并到vue.config.js

1. plugins

1.1 在webpack中

module.exports = {
...
	plugins:[
		new ...() // 插件
	]
}

1.2 在vue.config.js中

   分两种情况，这个插件vue-cli有没有内置，如果没有，写在configureWebpack中

configureWebpack: config=>{
	...
	Object.assign(config, {
		...
		plugins:[
			...config.plugins,// vueCli自带的plugins
			new ...//新加的plugins
		]
	}
}

   如果vue-cli有内置，那么只能写在chainWebpack去修改

chainWebpack: config=>{
	...
	config.plugin('html').tap(args => {
     	...
    	return args
    }).end()
}

2. moudle中loader

loader同样分两种情况，vueCli内置了很多loader，有的如果不是修改配置就不需要额外增加，
比如webpack中配置vue-loader不需要

 module: {
     rules: [
         {
             test: /\.vue$/,
             use: [
                 'vue-loader'
             ]
         },
         {
             test: /\.(png|jpg|gif|JPG)$/,
             use: [{
                 loader: 'url-loader',
                 options: {
                     limit: 1,
                     outputPath: 'img/',
                     esModule: false
                 }
             }]
         }
     ]
}

  图片修改output路径也不需要，本身配置图片就是默认在img文件夹下面，url-loader中增加options.limit
  意思是文件大小<limit大小的时候，则使用base64方式展示图片，那么在vue.config.js中需要配置

chainWebpack: (config) => {
 	...
    config.module
      .rule('images')
      .use('url-loader')
        .loader('url-loader')
        .tap(options=>Object.assign(options,{limit:1}))
        .end()// 如果还有其他module配置，需要加end()
 	...
  },