網(wǎng)上查的一些配置,方便查看江咳,有問題歡迎大家指出逢净,只是一些說明,方便查閱,不要拷貝爹土,會報錯I瘛!
module.exports = {
? // 部署應(yīng)用包時的基本URL胀茵。
? // https://www.app.com/ => '/'
? // https://www.app.com/my-app/ => '/my-app/'
? // 如果值為空字符串 '' 或者是相對路徑 './', 都會被鏈接為相對路徑
? //好像被廢棄了社露,使用publicPath 部署應(yīng)用包時的基本URL。用法和webpack本身的output.publicPath一致琼娘。
? //但在cli的其它地方也會用到這個值峭弟,所以請不要直接修改webpack的output.publicPath
? //baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/',
? publicPath : '/',
? // 生成環(huán)境構(gòu)建文件的目錄。構(gòu)建時傳入 --no-clean 可關(guān)閉該行為
? outputDir: 'dist',
? // 放置生成的靜態(tài)資源(js, css, img, fonts)d的(相對于 outputDir 的)目錄
? assetsDir: '',
? // 指定生成的 index.html 的輸出路徑 (相對于 outputDir ).也可以是一個絕對路徑
? indexPath: 'index.html',
? // 生成的靜態(tài)資源在它們的文件名中包含了hash以便更好的控制緩存脱拼。
? // 如果你無法使用Vue CLI生成的 index THML,你可以通過將這個選項設(shè)為 false 來關(guān)閉文件名哈希
? filenameHashing: true,
? pages: {
? ? index: {
? ? ? // 頁面入口
? ? ? entry: 'src/main.js',
? ? ? // 模板來源
? ? ? template: 'public/index.html',
? ? ? // 在 dist/index.html 的輸出
? ? ? filename: 'index.html',
? ? ? // 當(dāng)使用 title 選項時瞒瘸,
? ? ? // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
? ? ? title: 'hello-world',
? ? ? // 在這個頁面中包含的塊,默認(rèn)情況下會包含提取出來的通用 chunk 和 vendor chunk
? ? ? chunks: [ 'chunk-vendors', 'chunk-common', 'index']
? ? },
? ? // 當(dāng)使用只有入口的字符串格式時熄浓,
? ? // 模板會被推導(dǎo)為 `public/subpage.html`
? ? // 并且如果找不到的話情臭,就回退到 `public/index.html`
? ? // 輸出文件名會被推導(dǎo)為 `subpage.html`
? ? subpage: 'src/main.js'
? },
? // 在生成構(gòu)建時禁用 eslint-loader
? lintOnSave: process.env.NODE_ENV !== 'production',
? // 是否使用包含運行時編譯器的Vue構(gòu)建版本,
? // 設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項了,但是這會讓你的應(yīng)用額外增加 10kb 左右
? runtimeCompiler: false,
? // 默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件赌蔑。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴俯在,可以在這個選項中列出來
? transpileDependencies: [],
? // 如果你不需要生產(chǎn)環(huán)境的 source map, 可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建
? productionSourceMap: true,
? // 設(shè)置生產(chǎn)的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性
? // 需要注意的是該選項僅影響由 html-webpack-plugin 在構(gòu)建時注入的標(biāo)簽 - 直接寫在模板 (public/index.html) 中的標(biāo)簽不受影響
? crossorigin: undefined,
? integrity: false,
? // 值如果是一個對象,則會通過 webpack-merge 合并到最終的配置中
? // 值如果是一個函數(shù)娃惯,則會接收被解析的配置作為參數(shù)朝巫。
? // 該函數(shù)及可以修改配置并不返回任何東西,也可以返回一個被克隆或合并過的配置版本石景。
? // configureWebpack: {
? //? plugins: [
? //? ? new MyAwesomeWebpackPlugin()
? //? ]
? // },
? configureWebpack: config => {
? ? if (production.env.NODE_ENV === 'production') {
? ? ? // 為生產(chǎn)環(huán)境修改配置...
? ? } else {
? ? ? // 為開發(fā)環(huán)境修改配置...
? ? }
? },
? // 鏈?zhǔn)讲僮?Vue CLI內(nèi)部的 webpack 配置是通過 webpack-chain 維護(hù)的劈猿。
? // 這個庫提供了一個 webpack 原始配置的上層抽象,使其可以定義具名的 loader 規(guī)則和具名插件潮孽,并有機(jī)會在后期進(jìn)入這些規(guī)則并對它們的選項進(jìn)行修改
? chainWebpack: config => {
? ? config.module
? ? ? .rule('vue')
? ? ? .use('vue-loader')
? ? ? ? .loader('vue-loader')
? ? ? ? .tap(options => {
? ? ? ? ? // 修改它的選項
? ? ? ? ? return options
? ? ? ? })
? },
? // 如果想在 js 中作為 CSS Modules 導(dǎo)入 CSS 或其他預(yù)處理文件揪荣,該文件應(yīng)該以 *.module.(css|less|sass|scss|styl) 結(jié)尾
? // import styles from './foo.module.css'
? // import sassStyles from './foo.module.scss'
? //? 如果你想去掉文件名的 .module, 可以設(shè)置 vue.config.js 中的 css.modules 為 true
? css: {
? ? module: true,
? ? // 提取 CSS 在開發(fā)環(huán)境模式下是默認(rèn)不開啟的,因為它和 CSS 熱重載不兼容往史。
? ? // 然而仗颈,你仍然可以將這個值顯性地設(shè)置為 true 在所有情況下都強(qiáng)制提取
? ? expert: production.env.NODE_ENV === 'production' ? true : false,
? ? // 是否為 CSS 開啟 source map。設(shè)置為 true 之后可能會影響構(gòu)建的性能
? ? sourceMap: false,
? ? // 向 CSS 相關(guān)的 loader 傳遞選項
? ? loaderOptions: {
? ? ? css: {
? ? ? ? // 這里的選項會傳遞給 css-loader
? ? ? },
? ? ? postcss: {
? ? ? ? // 這里的選項會傳遞給 postcss-loader
? ? ? },
? ? ? sass: {
? ? ? ? // 所以這個假設(shè)你有 `src/variables.scss`
? ? ? ? // data: `@import "@/variables.scss";`
? ? ? }
? ? }
? },
? devServer: {
? ? // 在設(shè)置讓瀏覽器 overlay 同時顯示警告和錯誤
? ? overlay: {
? ? ? warnings: true,
? ? ? errors: true
? ? },
? ? proxy: {
? ? ? // '/api': {
? ? ? //? target: '<url>',
? ? ? //? ws: true,
? ? ? //? changeOrigin: true
? ? ? // },
? ? ? // '/foo': {
? ? ? //? target: '<other_url>'
? ? ? // }
? ? }
? },
? // 是否為 Babel 或 TypeScript 使用 threa-loader椎例。
? // 該選項在系統(tǒng)的 CPU 有多于一個內(nèi)核時自動啟用挨决,僅作用于生產(chǎn)構(gòu)建
? parallel: require('os').cpus().length > 1,
? pwa: {
? ? // 'GenerateSW'(默認(rèn)), 每次重建 web 應(yīng)用程序時都會生成一個新的服務(wù)工作文件。
? ? // 'InjectManifest' 允許您從現(xiàn)有的服務(wù)工作文件開始订歪,并創(chuàng)建該文件的副本脖祈,
? ? // 并在其中注入 "預(yù)先緩存清單"
? ? workboxPluginMode: 'GenerateSW',
? ? // workboxOptions:{
? ? //? swSrc: 'dev/sw.js'
? ? // }
? ? // 默認(rèn)值:"名稱"字段 package.json
? ? // 用作 apple-mobile-web-app-title 生成的 HTML 中元標(biāo)記的值。請注意刷晋,您需要進(jìn)行編輯 public/manifest.json 才能與之匹配
? ? // name: '',
? ? themeColor: '#4DBA87',
? ? msTileColor: '#000000',
? ? appleMobileWebAppCapable: 'no',
? ? appleMobileWebAppStatusBarStyle: 'default',
? ? // 如果您需要根據(jù)瀏覽器的緩存想 NOT 和 manifest 添加版本盖高,則使用此選項慎陵。
? ? // 這將附加 ?v=<pwa.assetsVersion> 到圖標(biāo)和清單的 URL 。
? ? assetsVersion: '',
? ? // 應(yīng)用程序清單的路徑
? ? manifestPath: 'manifest.json',
? ? iconPaths: {
? ? ? favicon32: 'img/icons/favicon-32x32.png',
? ? ? favicon16: 'img/icons/favicon-16x16.png',
? ? ? appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
? ? ? maskIcon: 'img/icons/safari-pinned-tab.svg',
? ? ? msTileImage: 'img/icons/msapplication-icon-144x144.png',
? ? },
? },
? // 這是一個不進(jìn)行任何 schema(模式) 驗證的對象喻奥,因此它可以用來傳遞任何第三方插件選項席纽。
? pluginOptions: {
? ? foo: {
? ? ? // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項
? ? }
? }
}