vue-cli3英文文档vue-cli3中文文档webpack4插件webpack-chainTLDRvue-cli3与版本2有很大不同vue-cli3的github仓库由原来独立的github仓库迁移到vue项目中。vue-cli3的项目架构完全摒弃了vue-cli2原有的架构，3的设计更加抽象简洁（这个可以在后面详细介绍）vue-cli3是基于webpack4的，vue-cli2orwebapck3vue-cli3的设计原则是“0配置”Vue-cli3提供vueui命令，提供可视化配置，更加人性化因为vue-cli3也学习了rollup0配置的思想配置，所以项目初始化后，没有了之前熟悉的build目录，也就没有webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js等配置文件了。那么，我们如何配置自己的项目呢？其实这一切都是因为vue-cli3的项目初始化，已经帮助开发者解决了80%，甚至大部分情况下的webpack配置。以上功能由@vue/cli-service依赖处理。当你在node_modules目录下打开@vue中的cli-service看一看，是不是有种似曾相识的感觉？说了这么多，在实际的开发过程中，肯定还是需要开发者自己去修改配置，那怎么办呢？这需要在项目的根目录下手动新建一个vue.config.js。这是我提供的一个基本模板：module.exports={baseUrl:process.env.NODE_ENV==='production'?'//your_url':'/',outputDir:'dist',assetsDir:'static',filenameHashing:true,//在多页面模式下构建时，webpack配置将包含不同的插件//（会有多个html-webpack-plugin和preload-webpack-plugin的实例）。//如果您尝试修改这些插件的选项，请确保运行vueinspect。pages:{index:{//页面条目entry:'src/pages/index/index.js',//源模板template:'src/pages/index/index.html',//输出为dist/index.htmlfilename:'index.html',//当使用title选项时，//模板标题标签需要是
<%=htmlWebpackPlugin.options.title%>title:'Home',//要包含在此页面上的块，默认情况下包括//提取的公共块和供应商块。chunks:['chunk-vendors','chunk-common','index']}//当使用仅输入字符串格式时，//模板被推断为`public/subpage.html`//并返回如果找不到，到`public/index.html`。//输出文件名被推断为`subpage.html`。//subpage:''},//eslint-loader是否检查lintOnSave:true,//是否使用VuecorebuildwithruntimecompilerruntimeCompiler:false,//默认情况下，babel-loader忽略所有文件node_modulestranspileDependencies:[],//生产环境sourceMapproductionSourceMap:false,//cors相关https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors//corsUseCredentials:false,//webpack配置，配置当使用key-value对象时会合并，当是方法时会重写配置//https://cli.vuejs.org/guide/webpack.html#simple-configureconfigureWebpack:(config)=>{},//用于生成和修改webpack的webpack链接APIConfiguration//https://github.com/mozilla-neutrino/webpack-chainchainWebpack:(config)=>{//因为是多页面，所以取消chunks，每个页面只对应一个JS/CSSconfig.优化.splitChunks({cacheGroups:{}});//'src/lib'目录为外部库文件，不参与eslint检测config.module.rule('eslint').exclude.add('/Users/maybexia/Downloads/FE/community_built-in/src/lib').end()},//该配置高于chainWebpack中cssloader的配置css:{//是否启用对foo.module.css样式的支持modules:false,//是否使用css分离插件ExtractTextPlugin，使用独立样式文件加载，不使用
