var path = require('path') var glob = require('glob'); var config = require('../config') var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } exports.cssLoaders = function (options) { options = options || {} var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { var loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { var output = [] var loaders = exports.cssLoaders(options) for (var extension in loaders) { var loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } exports.getEntries = function (globPath) { var entries = {} /** * 读取src目录,并进行路径裁剪 */ glob.sync(globPath).forEach(function (entry) { /** * path.basename 提取出用 ‘/' 隔开的path的最后一部分,除第一个参数外其余是需要过滤的字符串 * path.extname 获取文件后缀 */ // var basename = path.basename(entry, path.extname(entry), 'router.js') // 过滤router.js // ***************begin*************** // 当然, 你也可以加上模块名称, 即输出如下: { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' } // 最终编译输出的文件也在module目录下, 访问路径需要时 localhost:8080/module/index.html // slice 从已有的数组中返回选定的元素, -3 倒序选择,即选择最后三个 var tmp = entry.split('/').splice(-3) var moduleName = tmp.slice(1, 2); // ***************end*************** entries[moduleName] = entry }); //console.log(entries); // 获取的主入口如下: { main: './src/module/index/main.js', test: './src/module/test/test.js' } return entries; } // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin exports.getHtmlWebpackPlugins = function () { var pages = this.getEntries('./src/module/**/*.html') var htmlWebpackPlugins = [] for (var page in pages) { // 配置生成的html文件,定义路径等 var conf = { filename: page + '.html', template: pages[page], //模板路径 inject: true, // excludeChunks 允许跳过某些chunks, 而chunks告诉插件要引用entry里面的哪几个入口 // 如何更确定理解这块呢?举个例子:比如本demo中包含两个模块(index和about),最确定当然是各个模块引入自己所需的js, // 而不是每个页面都引入所有的js,你可以把下面这个excludeChunks去掉,然后npm run build,然后看编译出来的index.html和about.html就知道了 // filter:将数据过滤,然后返回符合要求的数据,Object.keys是获取JSON对象中的每个key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }), minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', // chunks: ['manifest', 'vendors', page], // 每个html引用的js模块 } htmlWebpackPlugins.push(new HtmlWebpackPlugin(conf)) } return htmlWebpackPlugins }