GitBucket
4.6.0
Toggle navigation
Sign in
Files
Branches
1
Tags
Issues
Pull Requests
Labels
Milestones
Wiki
08335
/
hivui-platform-template
hivui平台项目模板
Browse code
add
master
1 parent
5daaa6c
commit
cb7938ec6d72cc7019b37654b4306067fd82fd53
caibinghong
authored
on 17 Jun 2021
Showing
7 changed files
babel.config.js
build/build-watch.js
build/build.js
build/module-conf.js
build/webpack.build.conf.js -> build/webpack.base.conf.js
package.json
可编译版package.json
Ignore Space
Show notes
View
babel.config.js
//vite 启动,与webpack 编译都能识别这个 process.env.NODE_ENV // console.log('babel.config.js process.env.NODE_ENV:',process.env.NODE_ENV) let config = {};// 默认vite 预览不做任何配置 ,否则有影响vite 对jsx 预览 if(process.env.NODE_ENV=="production"){ config = { "plugins": [ "babel-plugin-transform-vite-meta-env", "@vue/babel-plugin-transform-vue-jsx", [ "component", { "libraryName": "hi-ui", "style": false } ] ], "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3, "targets":[ "> 1%", "last 2 versions", "not ie <= 8"] } ] ] } } module.exports = config;
//vite 启动,与webpack 编译都能识别这个 process.env.NODE_ENV console.log('babel.config.js process.env.NODE_ENV:',process.env.NODE_ENV) let config = {};// 默认vite 预览不做任何配置 ,否则有影响vite 对jsx 预览 if(process.env.NODE_ENV=="production"){ config = { "plugins": [ "babel-plugin-transform-vite-meta-env", "@vue/babel-plugin-transform-vue-jsx", [ "component", { "libraryName": "hi-ui", "style": false } ] ], "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3, "targets":[ "> 1%", "last 2 versions", "not ie <= 8"] } ] ] } } module.exports = config;
Show notes
View
build/build-watch.js
100644 → 0
const fs = require("fs"); const path = require('path'); const chalk = require('chalk'); const execFileSync = require('child_process').execFileSync; // 需要忽略的文件夹 const ignores = 'dist,node_modules,build'.split(',') const buildFile = path.join(__dirname, 'build.js') // 有时候修改文件后会连续回调两次,用这个时间过滤掉第二次重复的回调 var lastUpdateTime = 0; var checkModule = function(dir){ var files = fs.readdirSync(dir),flag=false; for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue var file =files[i] var stat = fs.statSync( dir + '/' + file) if (stat.isDirectory() != true && file=="package.json") { flag = true; break; } } return flag; } function watch(dir) { fs.watch(dir, (event, filename) => { if (ignores.includes(filename)) return;//false true var diff = Date.now() - lastUpdateTime lastUpdateTime = Date.now() if (diff < 100) return; if(checkModule(dir)==false){ return; } // TODO: do anything ... console.log('正在编译:',buildFile,dir,filename) execFileSync( 'node', [buildFile, dir]); }) // 原生监控不能监控到子文件夹中的文件改变事件,遍历之 var files = fs.readdirSync(dir); for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue var file = dir + '/' + files[i] var stat = fs.statSync(file) if (stat.isDirectory() == true) { watch(file); } } } // 开始监控当前目录 watch('.') console.log('start watch...');
Ignore Space
Show notes
View
build/build.js
'use strict' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const merge = require('webpack-merge') process.env.NODE_ENV = 'production' // 用来记录当前打包的模块路径列表 let moduleList = (process.argv[2] || "").replace(/\s*$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList || [] } else { moduleList = moduleList.split(',') } // 如果有传参时,对传入的参数进行检测,如果参数非法,那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.base.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${moduleList[i]}/index.js`; let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE) } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在 返回 true ,如果目录不存在 返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中,默认会把所有入口的chunks追加到html中,这样是不行的 chunks: ['vendor', 'manifest', 'elementUI', 'hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, chunksSortMode: 'dependency', compile: true })) webpackList.push(wpk); } // const spinner = ora('building for production...') // spinner.start(); //只删除相关模块的目录 // Promise.all(rmList).then(function (values) { // }).catch((error) => { // console.log(chalk.red(error))// 失败了,打出 '失败' // }); webpack(webpackList, (err, stats) => { if (err) throw err; if (stats.hasErrors()) { stats.stats.map(item => { item.compilation.errors.map(msg => { console.log(chalk.red(msg)); }) }) // console.log(chalk.red(' Build failed with errors.\n')); process.exit(1); } // console.log(chalk.cyan(' Build complete.\n')); }); return; rm(path.resolve(__dirname, '../dist'), err => { if (err) throw err webpack(webpackList, (err, stats) => { // spinner.stop() if (err) throw err if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } // console.log(chalk.cyan(' Build complete.\n')) }) })
'use strict' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const merge = require('webpack-merge') process.env.NODE_ENV = 'production' // 用来记录当前打包的模块路径列表 let moduleList = (process.argv[2] || "").replace(/\s*$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList || [] } else { moduleList = moduleList.split(',') } // 如果有传参时,对传入的参数进行检测,如果参数非法,那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.build.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${moduleList[i]}/index.js`; let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE) } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在 返回 true ,如果目录不存在 返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中,默认会把所有入口的chunks追加到html中,这样是不行的 chunks: ['vendor', 'manifest', 'elementUI', 'hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, chunksSortMode: 'dependency', compile: true })) webpackList.push(wpk); } // const spinner = ora('building for production...') // spinner.start(); //只删除相关模块的目录 // Promise.all(rmList).then(function (values) { // }).catch((error) => { // console.log(chalk.red(error))// 失败了,打出 '失败' // }); webpack(webpackList, (err, stats) => { if (err) throw err; if (stats.hasErrors()) { stats.stats.map(item => { item.compilation.errors.map(msg => { console.log(chalk.red(msg)); }) }) // console.log(chalk.red(' Build failed with errors.\n')); process.exit(1); } // console.log(chalk.cyan(' Build complete.\n')); }); return; rm(path.resolve(__dirname, '../dist'), err => { if (err) throw err webpack(webpackList, (err, stats) => { // spinner.stop() if (err) throw err if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } // console.log(chalk.cyan(' Build complete.\n')) }) })
Ignore Space
Show notes
View
build/module-conf.js
const fs = require("fs"); var chalk = require('chalk') var glob = require('glob') const packageConfig = require('../package.json') const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // 获取所有的moduleList var moduleList = [] // 需要忽略的文件夹 const ignores = 'dist,node_modules,build'.split(',') function getAllModule(dir) { var files = fs.readdirSync(dir), isFind = false; //判断是否有模块存在 for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue; if (files[i] == "package.json") { moduleList.push(dir); isFind = true; break; } } if (isFind == false) { for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue var file = dir + '/' + files[i] var stat = fs.statSync(file) if (stat.isDirectory() == true) { getAllModule(file); } } } } console.log('指定目录:',projectName) getAllModule('./'+projectName);//指定目录 开始搜索模块 // 检测是否在输入的参数是否在允许的list中 var checkModule = function (module) { var module = module||process.env.MODULE_ENV; // 检查moduleList是否有重复 var hash = {} var repeatList = [] for(var l = 0;l < moduleList.length; l++){ if(hash[moduleList[l]]){ repeatList.push(moduleList[l]) } hash[moduleList[l]] = true } if(repeatList.length > 0){ console.log(chalk.red('moduleList 有重复:')) console.log(chalk.red(repeatList.toString())) return false } let result = true let illegalParam = '' for (let moduleToBuild of module.split(',')) { if (moduleList.indexOf(moduleToBuild) === -1) { result = false illegalParam = moduleToBuild break } } if(result === false){ console.log(chalk.red('参数错误,允许的参数为:')) console.log(chalk.green(moduleList.toString())) console.log(chalk.yellow(`非法参数:${illegalParam}`)) } return result } // 获取当前要打包的模块列表 function getModuleToBuild () { let moduleToBuild = [] if (process.env.NODE_ENV === 'production') { /* 部署态,构建要打包的模块列表,如果指定了要打包的模块,那么按照指定的模块配置入口 * 这里有个特性,即使参数未传,那么获取到的undefined也是字符串类型的,不是undefined类型 * */ if (process.env.MODULE_ENV !== 'undefined') { moduleToBuild = process.env.MODULE_ENV.split(',') } else { // 如果未指定要打包的模块,那么打包所有模块 moduleToBuild = moduleList } } else { // 开发态,获取所有的模块列表 moduleToBuild = moduleList } return moduleToBuild } exports.moduleList = moduleList exports.checkModule = checkModule exports.getModuleToBuild = getModuleToBuild
const fs = require("fs"); var chalk = require('chalk') var glob = require('glob') const packageConfig = require('../package.json') const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // 获取所有的moduleList var moduleList = [] // 需要忽略的文件夹 const ignores = 'dist,node_modules,build'.split(',') function getAllModule(dir) { var files = fs.readdirSync(dir), isFind = false; //判断是否有模块存在 for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue; if (files[i] == "package.json") { moduleList.push(dir); isFind = true; break; } } if (isFind == false) { for (var i = 0; i < files.length; i++) { if (ignores.includes(files[i])) continue var file = dir + '/' + files[i] var stat = fs.statSync(file) if (stat.isDirectory() == true) { getAllModule(file); } } } } getAllModule('./'+projectName);//指定目录 开始搜索模块 // 检测是否在输入的参数是否在允许的list中 var checkModule = function (module) { var module = module||process.env.MODULE_ENV; // 检查moduleList是否有重复 var hash = {} var repeatList = [] for(var l = 0;l < moduleList.length; l++){ if(hash[moduleList[l]]){ repeatList.push(moduleList[l]) } hash[moduleList[l]] = true } if(repeatList.length > 0){ console.log(chalk.red('moduleList 有重复:')) console.log(chalk.red(repeatList.toString())) return false } let result = true let illegalParam = '' for (let moduleToBuild of module.split(',')) { if (moduleList.indexOf(moduleToBuild) === -1) { result = false illegalParam = moduleToBuild break } } if(result === false){ console.log(chalk.red('参数错误,允许的参数为:')) console.log(chalk.green(moduleList.toString())) console.log(chalk.yellow(`非法参数:${illegalParam}`)) } return result } // 获取当前要打包的模块列表 function getModuleToBuild () { let moduleToBuild = [] if (process.env.NODE_ENV === 'production') { /* 部署态,构建要打包的模块列表,如果指定了要打包的模块,那么按照指定的模块配置入口 * 这里有个特性,即使参数未传,那么获取到的undefined也是字符串类型的,不是undefined类型 * */ if (process.env.MODULE_ENV !== 'undefined') { moduleToBuild = process.env.MODULE_ENV.split(',') } else { // 如果未指定要打包的模块,那么打包所有模块 moduleToBuild = moduleList } } else { // 开发态,获取所有的模块列表 moduleToBuild = moduleList } return moduleToBuild } exports.moduleList = moduleList exports.checkModule = checkModule exports.getModuleToBuild = getModuleToBuild
Ignore Space
Show notes
View
build/webpack.build.conf.js → build/webpack.base.conf.js
//考虑用,parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') // const CopyWebpackPlugin = require('copy-webpack-plugin') const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件,写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.'+process.env.NODE_ENV) }); var cfg = {...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k)))} let evnConfig = {} for(let key in cfg){ evnConfig[key] = '"'+cfg[key]+'"' } //路径转换 function resolve(dir) { return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js|vue|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名,当用hivui create 创建时候 会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // console.log('______________________:',resolve(projectName+'/hivuiMain')) module.exports = { //指定目录,默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String||Array // entry: '', //动态多入门文件时 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() || [] // 根据传入的待打包目录名称,构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录 相对于dist 下 publicPath: './' }, // output: { // filename:'static/js/[name].[chunkhash].js', // chunkFilename: 'static/js/[id].[chunkhash].js' // }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名,引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // jquery: "jQuery", }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js|jsx)$/, loader: 'babel-loader', // exclude: [ // /node_modules\/(webpack|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[hash:7].[ext]' } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: '#source-map', plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env':evnConfig }), //webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js, //webpack 4版本之后被移除了,使用config.optimization.splitChunks来代替 //用来缩小(压缩优化)js文件 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, parallel: true }), // // 将css提取到自己的文件中 new ExtractTextPlugin({ filename: 'static/css/[name].[contenthash].css', // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 allChunks: false, }), // // 压缩提取的CSS。我们使用这个插件是为了来自不同组件的重复CSS可以被删除。 new OptimizeCSSPlugin({ //开发环境 // cssProcessorOptions:{ // safe: true, map: { inline: false } // }, //打包生产 cssProcessorOptions: { safe: true } }), // keep module.id stable when vender modules does not change new webpack.HashedModuleIdsPlugin(), // enable scope hoisting new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file // 分别提取公共库 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks(module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), //提取引用最小3次的公共包 // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // split echarts into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'echarts', minChunks(module) { var context = module.context; return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0); } }), // split xlsx into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'xlsx', minChunks(module) { var context = module.context; return context && (context.indexOf('xlsx') >= 0); } }), // split codemirror into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'codemirror', minChunks(module) { var context = module.context; return context && (context.indexOf('codemirror') >= 0); } }), // copy custom static assets // new CopyWebpackPlugin([ // { // from: resolve('static'), // to: 'static', // ignore: ['.*'] // } // ]), // 打包后,对包进行大小分析 // new BundleAnalyzerPlugin() ], }
const path = require('path') const webpack = require('webpack') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') // const CopyWebpackPlugin = require('copy-webpack-plugin') const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件,写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.'+process.env.NODE_ENV) }); var cfg = {...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k)))} let evnConfig = {} for(let key in cfg){ evnConfig[key] = '"'+cfg[key]+'"' } //路径转换 function resolve(dir) { return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js|vue|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名,当用hivui create 创建时候 会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; // console.log('______________________:',resolve(projectName+'/hivuiMain')) module.exports = { //指定目录,默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String||Array // entry: '', //动态多入门文件时 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() || [] // 根据传入的待打包目录名称,构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录 相对于dist 下 publicPath: './' }, // output: { // filename:'static/js/[name].[chunkhash].js', // chunkFilename: 'static/js/[id].[chunkhash].js' // }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名,引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // jquery: "jQuery", }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js|jsx)$/, loader: 'babel-loader', // exclude: [ // /node_modules\/(webpack|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[hash:7].[ext]' } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: '#source-map', plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env':evnConfig }), //webpack 4之前的版本是通过webpack.optimize.CommonsChunkPlugin来压缩js, //webpack 4版本之后被移除了,使用config.optimization.splitChunks来代替 //用来缩小(压缩优化)js文件 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, parallel: true }), // // 将css提取到自己的文件中 new ExtractTextPlugin({ filename: 'static/css/[name].[contenthash].css', // Setting the following option to `false` will not extract CSS from codesplit chunks. // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 allChunks: false, }), // // 压缩提取的CSS。我们使用这个插件是为了来自不同组件的重复CSS可以被删除。 new OptimizeCSSPlugin({ //开发环境 // cssProcessorOptions:{ // safe: true, map: { inline: false } // }, //打包生产 cssProcessorOptions: { safe: true } }), // keep module.id stable when vender modules does not change new webpack.HashedModuleIdsPlugin(), // enable scope hoisting new webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file // 分别提取公共库 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks(module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }), //提取引用最小3次的公共包 // This instance extracts shared chunks from code splitted chunks and bundles them // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin({ name: 'app', async: 'vendor-async', children: true, minChunks: 3 }), // split echarts into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'echarts', minChunks(module) { var context = module.context; return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0); } }), // split xlsx into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'xlsx', minChunks(module) { var context = module.context; return context && (context.indexOf('xlsx') >= 0); } }), // split codemirror into its own file new webpack.optimize.CommonsChunkPlugin({ async: 'codemirror', minChunks(module) { var context = module.context; return context && (context.indexOf('codemirror') >= 0); } }), // copy custom static assets // new CopyWebpackPlugin([ // { // from: resolve('static'), // to: 'static', // ignore: ['.*'] // } // ]), // 打包后,对包进行大小分析 // new BundleAnalyzerPlugin() ], }
Ignore Space
Show notes
View
package.json
{ "name": "hi-vui-template", "version": "1.0.1", "description": "A hi-vui-template project", "author": "caibinghong <caibinghong@163.com>", "scripts": { "dev": "vite", "vite-build": "vite build", "vite-serve": "vite preview", "start": "npm run dev", "build": "node build/build.js", "build-list": "node build/build.js ./project/hivuiLogin", "build-list1": "node build/build.js ./project/hivuiMain" }, "dependencies": { "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "core-js": "^3.14.0", "enquire.js": "^2.1.6", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/helper-module-imports": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "@vue/compiler-sfc": "^3.1.1", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "css-loader": "^0.28.7", "dotenv": "^10.0.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^3.2.0", "less": "^4.1.1", "less-loader": "^3.0.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.9", "postcss-url": "^7.3.0", "semver": "^5.4.1", "shelljs": "^0.7.8", "svg-sprite-loader": "^3.5.2", "uglifyjs-webpack-plugin": "^1.1.3", "url-loader": "^0.6.2", "vite": "^2.2.4", "vite-plugin-html": "^2.0.7", "vite-plugin-pagedata": "^1.0.3", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^13.5.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.6.12", "webpack": "^3.12.0", "webpack-merge": "^4.1.1" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } }
{ "name": "hi-vui-template", "version": "1.0.1", "description": "A hi-vui-template project", "author": "caibinghong <caibinghong@163.com>", "scripts": { "dev": "vite", "vite-build": "vite build", "vite-serve": "vite preview", "start": "npm run dev", "build": "node build/build.js", "build-list": "node build/build.js ./project/hivuiLogin", "build-list1": "node build/build.js ./project/hivuiMain", "build-watch": "node build/build-watch.js", "build-dev": "cross-env BABEL_ENV=dev" }, "dependencies": { "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "core-js": "^3.14.0", "enquire.js": "^2.1.6", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/helper-module-imports": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "@vue/compiler-sfc": "^3.1.1", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "cross-env": "^7.0.3", "css-loader": "^0.28.7", "dotenv": "^10.0.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^3.2.0", "less": "^4.1.1", "less-loader": "^3.0.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.9", "postcss-url": "^7.3.0", "semver": "^5.4.1", "shelljs": "^0.7.8", "svg-sprite-loader": "^3.5.2", "uglifyjs-webpack-plugin": "^1.1.3", "url-loader": "^0.6.2", "vite": "^2.2.4", "vite-plugin-html": "^2.0.7", "vite-plugin-pagedata": "^1.0.3", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^13.5.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.6.12", "webpack": "^3.12.0", "webpack-merge": "^4.1.1" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } }
Ignore Space
Show notes
View
可编译版package.json
{ "name": "hi-vui-template", "version": "1.0.1", "description": "A hi-vui-template project", "author": "caibinghong <caibinghong@163.com>", "scripts": { "dev": "vite", "vite-build": "vite build", "vite-serve": "vite preview", "start": "npm run dev", "build": "node build/build.js", "build-list": "node build/build.js ./project/hivuiLogin", "build-list1": "node build/build.js ./project/hivuiMain" }, "dependencies": { "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "core-js": "^3.14.0", "enquire.js": "^2.1.6", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/helper-module-imports": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "@vue/compiler-sfc": "^3.1.1", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "css-loader": "^0.28.7", "dotenv": "^10.0.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^3.2.0", "less": "^4.1.1", "less-loader": "^3.0.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.9", "postcss-url": "^7.3.0", "semver": "^5.4.1", "shelljs": "^0.7.8", "svg-sprite-loader": "^3.5.2", "uglifyjs-webpack-plugin": "^1.1.3", "url-loader": "^0.6.2", "vite": "^2.2.4", "vite-plugin-html": "^2.0.7", "vite-plugin-pagedata": "^1.0.3", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^13.5.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.6.12", "webpack": "^3.12.0", "webpack-merge": "^4.1.1" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } }
{ "name": "hi-vui-template", "version": "1.0.1", "description": "A hi-vui-template project", "author": "caibinghong <caibinghong@163.com>", "scripts": { "dev": "vite", "vite-build": "vite build", "vite-serve": "vite preview", "start": "npm run dev", "build": "node build/build.js", "build-list": "node build/build.js ./project/hivuiLogin", "build-list1": "node build/build.js ./project/hivuiMain", "build-watch": "node build/build-watch.js", "build-dev": "cross-env BABEL_ENV=dev" }, "dependencies": { "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "core-js": "^3.14.0", "enquire.js": "^2.1.6", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/helper-module-imports": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "@vue/compiler-sfc": "^3.1.1", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "cross-env": "^7.0.3", "css-loader": "^0.28.7", "dotenv": "^10.0.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.5", "html-webpack-plugin": "^3.2.0", "less": "^4.1.1", "less-loader": "^3.0.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.9", "postcss-url": "^7.3.0", "semver": "^5.4.1", "shelljs": "^0.7.8", "svg-sprite-loader": "^3.5.2", "uglifyjs-webpack-plugin": "^1.1.3", "url-loader": "^0.6.2", "vite": "^2.2.4", "vite-plugin-html": "^2.0.7", "vite-plugin-pagedata": "^1.0.3", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^13.5.0", "vue-style-loader": "^3.0.3", "vue-template-compiler": "^2.6.12", "webpack": "^3.12.0", "webpack-merge": "^4.1.1" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } }
Show line notes below