const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__dirname, dir) const PAGES_PATH = './src/pages/*/*.js' module.exports = { // publicPath: '/test/', // 設置部署應用包時的基本URL publicPath: process.env.NODE_ENV === 'production' ? '/test/' : './', // 開發環境與生產環境的區分 //outputDir: 'testbuild', // 運行build 時生產的構建文件的目錄,默認'dist' // assetsDir: 'assets', // build以後生成的靜態資源放置的目錄,默認'' // indexPath: 'test/home.html', // build以後生成的index.html的路徑 // filenameHashing: true, // build以後生成的靜態資源默認狀況下加了hash值以控制靜態資源的緩存,默認是true // pages: { // index:{ // entry: 'src/pages/index/main.js', // page入口 // template: 'public/index.html', // public 裏面的文件 // filename: 'index.html', // build以後生成的文件及路徑名 // title: 'Index Page', // chunks: ['chunk-vendors', 'chunk-common', 'index'] // }, // page1:{ // entry: 'src/pages/page1/main.js', // page入口 // template: 'public/page1.html', // public裏面的文件 // filename: 'page1.html', // build以後生成的文件及路徑名 // title: 'page1', // 使用此項時,// template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title> // chunks: ['chunk-vendors', 'chunk-common', 'page1'] // 提取出來的通用 chunk 和 vendor chunk // }, // page2:{ // entry: 'src/pages/page2/main.js', // page入口 // template: 'public/page2.html', // filename: 'page2.html', // build以後生成的文件及路徑名 // title: 'Index Page', // chunks: ['chunk-vendors', 'chunk-common', 'page2'] // } // }, pages:setPages(), productionSourceMap: false, // 若是你不須要生產環境的 source map,能夠將其設置爲 false 以加速生產環境構建 // devServer: { // port: '1111', // // proxy: 'http://localhost:8080' //告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:8080。 // proxy: { // '/api': { // //要訪問的跨域的域名 // target: 'http://localhost:8080', // ws: true, // 是否啓用websockets // secure:false, // 使用的是http協議則設置爲false,https協議則設置爲true // changOrigin: true, //開啓代理:在本地會建立一個虛擬服務端,而後發送請求的數據,並同時接收請求的數據,這樣客戶端端和服務端進行數據的交互就不會有跨域問題 // pathRewrite: { // '^/api': '' // } // } // } // }, chainWebpack: config => { /* 自動導入公共文件*/ const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] types.forEach( type => addStyleResource(config.module.rule('scss').oneOf(type)) ) /* 添加別名*/ config.resolve.alias .set('@title', resolve ('src/assets/commonPublic/title.vue')) } } /** * 注入公共樣式 * @param rule */ function addStyleResource (rule) { rule.use('style-resource') .loader('style-resources-loader') .options({ patterns: [ path.resolve(__dirname, 'src/assets/common.scss') // resolve()返回絕對路徑 ] }) } /** * 多頁面跳轉 */ function setPages () { let pages = {} glob.sync(PAGES_PATH).forEach(filepath => { let fileList = filepath.split('/') let fileName = fileList[fileList.length - 2] pages[fileName] = { entry: filepath, template:`public/${fileName}.html` , // 'public/index.html' filename: `${fileName}.html`, // title: chunks: ['chunk-vendors', 'chunk-common', fileName] } }) return pages }
對應生成的dist文件目錄及多頁面配置時的文件目錄以下:css