<router-view/>
基於 glob 庫,獲得正確的 js 入口javascript
// 得到入口 js 文件 let entries = getEntry('./src/pages/**/*.js', './src/pages/'); // getEntry 方法 function getEntry(globPath, pathDir) { let files = glob.sync(globPath) let entries = {}, entry, dirname, basename, pathname, extname for (let i = 0; i < files.length; i++) { entry = files[i] dirname = path.dirname(entry) extname = path.extname(entry) basename = path.basename(entry, extname) pathname = path.normalize(path.join(dirname, basename)) pathDir = path.normalize(pathDir) if (pathname.startsWith(pathDir)) { pathname = pathname.substring(pathDir.length) } entries[pathname] = ['./' + entry] } return entries }
獲取對應 html, 配置 htmlcss
// 獲取對應 html let pages = Object.keys(getEntry('./src/pages/**/*.html', './src/pages/')) // 利用 HtmlWebpackPlugin 配置 html pages.forEach(function (pathname) { // 配置生成的 html 文件,定義路徑等,可根據最終打包的文件要求進行修改 let page = pathname if (pathname.search('/') != -1) { page = pathname.split('/').pop() } // config 對象 let config = { // html 名字 The file to write the HTML to. Defaults to index.html filename: page + '.html', // 模板路徑 // html-withimg-loader! 處理 html,以支持直接在html中使用img的src加載圖片 template: 'html-withimg-loader!' + 'src/pages/' + pathname + '.html', // js 插入位置 When passing true or 'body' all javascript resources will be placed at the bottom of the body element inject: true, // html 壓縮處理 minify: { // removeComments 移除頁面註釋,默認爲true removeComments: true, //collapseWhitespace 移除空格、回車、換行符等符號,默認爲true collapseWhitespace: false } // favicon: 'path/to/yourfile.ico' }; if (pathname in module.exports.entry) { // chunks 默認會在生成的 html 文件中引用全部的 js 文件,固然你也能夠指定引入哪些特定的文件 // vendors 爲第三方庫,common 爲公共的模塊部分,pathname 和 entry 對應 config.chunks = ['common', pathname]; // 給生成的 js 文件一個獨特的 hash 值,如 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script> config.hash = false; } // 在遍歷中配置 (須要生成幾個 html 文件,就配置幾個 HtmlWebpackPlugin 對象) module.exports.plugins.push(new htmlWebpackPlugin(config)); });