一 vuecli3 分页打包
通过配置vue.config.js实现
"use strict"; const titles = require("./title.js"); //每个页面文件名及对应的页面title const glob = require("glob"); const fs = require("fs"); const pages = {}; const path = require("path"); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); function resolve(dir) { return path.join(__dirname, dir); }
console.log(' process.argv', process.argv) //当运行命令后添加 pageKey=文件名 时可以用process.argv获取 console.log(' process.env.npm_config_argv', process.env.npm_config_argv) //当运行命令后添加 --pageKey=文件名 时可以用process.env.npm_config_argv获取 // npm指令需要读取 process.env.npm_config_argv const argv = JSON.parse(process.env.npm_config_argv); const config = {}; // 获取自定义参数 let idx = 2; const cooked = argv.cooked; const length = argv.cooked.length; while ((idx += 2) <= length) { config[cooked[idx - 2]] = cooked[idx - 1]; } //自定义参数获取获取单独要运行(打包)的页面对应的文件名 参考vuecli自定义参数 let pageKey = config['--pageKey'] if(pageKey){ pages[pageKey] = { entry: `./src/pages/${pageKey}/app.js`, template: "public/index.html", title: titles[pageKey], chunks: ["chunk-vendors", "chunk-common", pageKey] }; }else{
//因为每个页面的入口文件是app.js,通过全局变量读取所有文件夹下的app.js生成page对象
//每个页面都放在对应的文件夹里,文件夹名对应着打包后的文件名 glob.sync("./src/pages/**/app.js").forEach(path => { const chunk = path.split("./src/pages/")[1].split("/app.js")[0]; pages[chunk] = { entry: path, template: "public/index.html", title: titles[chunk], chunks: ["chunk-vendors", "chunk-common", chunk] }; }); } module.exports = { pages,
...
};
2 webpack+reack 分页分文件夹打包
const webpack = require('webpack') const titles = require("./title.js") const glob = require('glob') const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const processUrl = { dev: { NODE_ENV: '"dev"', BASE_API: '"http://xxx/api/"' }, test: { NODE_ENV: '"test"', BASE_API: '"http://xxx/api/"' }, production:{ NODE_ENV: '"production"', BASE_API: '"http://xxx/api/"' } } let env_config = processUrl[process.env.NODE_ENV]; module.exports = function (env = {}, argv) { const pageTitle = argv.pageTitle let entryObj = {} let plugin = [] if (!pageTitle) {
//默认全局 glob.sync('./src/views/**/index.jsx').forEach(function (filepath) { const chunk = filepath.split("./src/views/")[1].split("/index.jsx")[0] entryObj[chunk] = filepath plugin.push(new HtmlWebpackPlugin({ filename: chunk + '/' + chunk + '.html', title: titles[chunk], template: './public/index.html', chunks: ["chunk-vendors", "chunk-common", chunk] })) }) } else { entryObj[pageTitle] = `./src/views/${pageTitle}/index.jsx` plugin.push(new HtmlWebpackPlugin({ filename: pageTitle + '/' + `${pageTitle}.html`, title: titles[pageTitle], template: './public/index.html', chunks: ["chunk-vendors", "chunk-common", pageTitle] })) } return { mode: "production", // 通过 mode 声明生产环境 entry: entryObj, output: { // publicPath: __dirname + "/dist/", // 打包后资源文件的引用会基于此路径 path: path.resolve(__dirname, `./dist`), filename: `[name]/[name].js` }, module: { ... }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ //css文件处理 filename: './[name]/[name][contenthash:8].css' // 输出文件名和地址 }), ...plugin, // 配置process.env变量 new webpack.DefinePlugin({ "process.env": env_config }) ], } }