摘要:那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化,幫開(kāi)發(fā)者已經(jīng)解決了,甚至絕大部分情形下的配置。
vue-cli 3 英文文檔
vue-cli 3 中文文檔
webpack 4 plugins
webpack-chain
TLDR
vue-cli 3 與 2 版本有很大區(qū)別
vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下
vue-cli 3 的項(xiàng)目架構(gòu)完全拋棄了 vue-cli 2 的原有架構(gòu),3 的設(shè)計(jì)更加抽象和簡(jiǎn)潔(此處后續(xù)可以詳細(xì)介紹)
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 還是 webapck 3
vue-cli 3 的設(shè)計(jì)原則是“0配置”
vue-cli 3 提供了 vue ui 命令,提供了可視化配置,更加人性化
由于 vue-cli 3 也學(xué)習(xí)了 rollup 的零配置思路,所以項(xiàng)目初始化后,沒(méi)有了以前熟悉的 build 目錄,也就沒(méi)有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了?
其實(shí)這一切都是因?yàn)?vue-cli 3 的項(xiàng)目初始化,幫開(kāi)發(fā)者已經(jīng)解決了 80% ,甚至絕大部分情形下的 webpack 配置。
上述功能就是由 @vue/cli-service 依賴去處理,當(dāng)你打開(kāi) node_modules 目錄下 @vue 中的 cli-service 看一眼,是不是找到了熟悉的感覺(jué)?
說(shuō)了這么多,開(kāi)發(fā)者在實(shí)際開(kāi)發(fā)過(guò)程中,肯定還有需要自己去修改配置的地方,那么,該怎么做了?
這點(diǎn)就需要在項(xiàng)目根目錄下手動(dòng)新建一個(gè) vue.config.js,此處參考我提供的一個(gè)基礎(chǔ)模板:
module.exports = { baseUrl: process.env.NODE_ENV === "production" ? "http://your_url" : "/", outputDir: "dist", assetsDir: "static", filenameHashing: true, // When building in multi-pages mode, the webpack config will contain different plugins // (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin). // Make sure to run vue inspect if you are trying to modify the options for those plugins. pages: { index: { // entry for the pages entry: "src/pages/index/index.js", // the source template template: "src/pages/index/index.html", // output as dist/index.html filename: "index.html", // when using title option, // template title tag needs to be<%= htmlWebpackPlugin.options.title %> title: "首頁(yè)", // chunks to include on this pages, by default includes // extracted common chunks and vendor chunks. chunks: ["chunk-vendors", "chunk-common", "index"] } // when using the entry-only string format, // template is inferred to be `public/subpage.html` // and falls back to `public/index.html` if not found. // Output filename is inferred to be `subpage.html`. // subpage: "" }, // eslint-loader 是否在保存的時(shí)候檢查 lintOnSave: true, // 是否使用包含運(yùn)行時(shí)編譯器的Vue核心的構(gòu)建 runtimeCompiler: false, // 默認(rèn)情況下 babel-loader 忽略其中的所有文件 node_modules transpileDependencies: [], // 生產(chǎn)環(huán)境 sourceMap productionSourceMap: false, // cors 相關(guān) https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors // corsUseCredentials: false, // webpack 配置,鍵值對(duì)象時(shí)會(huì)合并配置,為方法時(shí)會(huì)改寫配置 // https://cli.vuejs.org/guide/webpack.html#simple-configuration configureWebpack: (config) => { }, // webpack 鏈接 API,用于生成和修改 webapck 配置 // https://github.com/mozilla-neutrino/webpack-chain chainWebpack: (config) => { // 因?yàn)槭嵌囗?yè)面,所以取消 chunks,每個(gè)頁(yè)面只對(duì)應(yīng)一個(gè)多帶帶的 JS / CSS config.optimization .splitChunks({ cacheGroups: {} }); // "src/lib" 目錄下為外部庫(kù)文件,不參與 eslint 檢測(cè) config.module .rule("eslint") .exclude .add("/Users/maybexia/Downloads/FE/community_built-in/src/lib") .end() }, // 配置高于chainWebpack中關(guān)于 css loader 的配置 css: { // 是否開(kāi)啟支持 foo.module.css 樣式 modules: false, // 是否使用 css 分離插件 ExtractTextPlugin,采用獨(dú)立樣式文件載入,不采用