webpack5

08335 / hivui-platform-template

hivui平台项目模板

Browse code webpack5 master
1 parent cde0b46 commit a92108386a2194b2313668716f15f53d0106a25d caibinghong authored on 29 Jun 2021

Showing 28 changed files

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,//是否去除空格 } })) webpackList.push(wpk); } 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; '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); } 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;

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,//是否去除空格
      }
    }))
  webpackList.push(wpk);
}

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;

'use strict'
require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const merge = require('webpack-merge')

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 = [];

//构建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`

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);
}

return;

Ignore Space Show notes View build/oldWebpack/webpack3/build.js 0 → 100644
'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); } 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;

Ignore Space Show notes View

build/oldWebpack/webpack3/build.js 0 → 100644

'use strict'
require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const merge = require('webpack-merge')

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);
}

return;

Ignore Space Show notes View build/oldWebpack/webpack3/check-versions.js 0 → 100644
'use strict' const chalk = require('chalk') const semver = require('semver') const packageConfig = require('../package.json') const shell = require('shelljs') function exec (cmd) { return require('child_process').execSync(cmd).toString().trim() } const versionRequirements = [ { name: 'node', currentVersion: semver.clean(process.version), versionRequirement: packageConfig.engines.node } ] if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm }) } module.exports = function () { const warnings = [] for (let i = 0; i < versionRequirements.length; i++) { const mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } } if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log() for (let i = 0; i < warnings.length; i++) { const warning = warnings[i] console.log(' ' + warning) } console.log() process.exit(1) } }

Ignore Space Show notes View

build/oldWebpack/webpack3/check-versions.js 0 → 100644

'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')

function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  const warnings = []

for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()

for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }

console.log()
    process.exit(1)
  }
}

Ignore Space Show notes View build/oldWebpack/webpack3/module-conf.js 0 → 100644
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

Ignore Space Show notes View

build/oldWebpack/webpack3/module-conf.js 0 → 100644

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

Ignore Space Show notes View build/oldWebpack/webpack3/run.js 0 → 100644
//build.js 升级版 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.config.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2 // use 2 workers }; function notify() { // do things console.log('编译完成！') } run(configPath, options, notify);

Ignore Space Show notes View

build/oldWebpack/webpack3/run.js 0 → 100644

Ignore Space Show notes View build/oldWebpack/webpack3/utils.js 0 → 100644
'use strict' const path = require('path') // const config = require('./config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json') // exports.assetsPath = function (_path) { // const assetsSubDirectory = process.env.NODE_ENV === 'production' // ? config.build.assetsSubDirectory // : config.dev.assetsSubDirectory // return path.posix.join(assetsSubDirectory, _path) // } exports.cssLoaders = function (options) { options = options \|\| {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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' }) } 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) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { if (severity !== 'error') return const error = errors[0] const filename = error.file && error.file.split('!').pop() notifier.notify({ title: packageConfig.name, message: severity + ': ' + error.name, subtitle: filename \|\| '', icon: path.join(__dirname, 'logo.png') }) } }

Ignore Space Show notes View

build/oldWebpack/webpack3/utils.js 0 → 100644

'use strict'
const path = require('path')
// const config = require('./config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

// exports.assetsPath = function (_path) {
//   const assetsSubDirectory = process.env.NODE_ENV === 'production'
//     ? config.build.assetsSubDirectory
//     : config.dev.assetsSubDirectory

//   return path.posix.join(assetsSubDirectory, _path)
// }

exports.cssLoaders = function (options) {
  options = options || {}

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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'
      })
    } 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) {
  const output = []
  const loaders = exports.cssLoaders(options)

for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

return (severity, errors) => {
    if (severity !== 'error') return

const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

Ignore Space Show notes View build/oldWebpack/webpack3/vue-loader.conf.js 0 → 100644
'use strict' const utils = require('./utils') const isProduction = process.env.NODE_ENV === 'production' module.exports = { loaders: utils.cssLoaders({ sourceMap: false, extract: isProduction }), cssSourceMap: false, // cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } }

Ignore Space Show notes View build/oldWebpack/webpack3/webpack.base.conf.js 0 → 100644
//考虑用，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') //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-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; const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 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/ // 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]' // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:7].[ext]' // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: "[hash:8].[name].[ext]", publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // 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({ // //"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json" // analyzerMode: 'disabled',//运行特定命令才打开 // generateStatsFile: true, // statsOptions: { source: false } // }) ], });

Ignore Space Show notes View

build/oldWebpack/webpack3/webpack.base.conf.js 0 → 100644

//考虑用，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')

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-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;

Ignore Space Show notes View build/oldWebpack/webpack3/webpack.config.js 0 → 100644
'use strict' process.env.NODE_ENV = 'production' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const merge = require('webpack-merge') // 用来记录当前打包的模块路径列表 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','app','hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, chunksSortMode: 'dependency', compile: true })) webpackList.push(wpk); } module.exports = webpackList;

Ignore Space Show notes View

build/oldWebpack/webpack3/webpack.config.js 0 → 100644

'use strict'
process.env.NODE_ENV = 'production'

require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const merge = require('webpack-merge')

// 用来记录当前打包的模块路径列表
let moduleList = (process.argv[2] || "").replace(/\s*$/g, "")
if (moduleList == "") {
  moduleList = require('./module-conf').moduleList || []
} else {
  moduleList = moduleList.split(',')
}

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','app','hiui', MODULE_NAME],
      minify: {
        removeComments: true,//去除注释
        collapseWhitespace: true,//是否去除空格
        removeAttributeQuotes: true//去除空属性
      },
      chunksSortMode: 'dependency',
      compile: true
    }))
  webpackList.push(wpk);
}

module.exports = webpackList;

Ignore Space Show notes View build/oldWebpack/webpack5/build.js 0 → 100644
'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,//是否去除空格 } })) webpackList.push(wpk); } 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;

Ignore Space Show notes View

build/oldWebpack/webpack5/build.js 0 → 100644

'use strict'
require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const { merge } = require('webpack-merge');

return;

Ignore Space Show notes View build/oldWebpack/webpack5/check-versions.js 0 → 100644
'use strict' const chalk = require('chalk') const semver = require('semver') const packageConfig = require('../package.json') const shell = require('shelljs') function exec (cmd) { return require('child_process').execSync(cmd).toString().trim() } const versionRequirements = [ { name: 'node', currentVersion: semver.clean(process.version), versionRequirement: packageConfig.engines.node } ] if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm }) } module.exports = function () { const warnings = [] for (let i = 0; i < versionRequirements.length; i++) { const mod = versionRequirements[i] if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } } if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log() for (let i = 0; i < warnings.length; i++) { const warning = warnings[i] console.log(' ' + warning) } console.log() process.exit(1) } }

Ignore Space Show notes View

build/oldWebpack/webpack5/check-versions.js 0 → 100644

'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')

function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  const warnings = []

for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()

for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }

console.log()
    process.exit(1)
  }
}

Ignore Space Show notes View build/oldWebpack/webpack5/module-conf.js 0 → 100644
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

Ignore Space Show notes View

build/oldWebpack/webpack5/module-conf.js 0 → 100644

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 = []

console.log('指定目录：',projectName)
getAllModule('./'+projectName);//指定目录 开始搜索模块

exports.moduleList = moduleList
exports.checkModule = checkModule
exports.getModuleToBuild = getModuleToBuild

Ignore Space Show notes View build/oldWebpack/webpack5/run.js 0 → 100644
//build.js 升级版 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.config.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2 // use 2 workers }; function notify() { // do things console.log('编译完成！') } run(configPath, options, notify);

Ignore Space Show notes View

build/oldWebpack/webpack5/run.js 0 → 100644

Ignore Space Show notes View build/oldWebpack/webpack5/utils.js 0 → 100644
'use strict' const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const packageConfig = require('../package.json') exports.cssLoaders = function (options) { options = options \|\| {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } if (options.extract) { loaders.unshift({ loader: MiniCssExtractPlugin.loader, options: {}, }) return loaders; } 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) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } // console.log(' styleLoaders : ' , JSON.stringify(output)); return output } exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { if (severity !== 'error') return const error = errors[0] const filename = error.file && error.file.split('!').pop() notifier.notify({ title: packageConfig.name, message: severity + ': ' + error.name, subtitle: filename \|\| '', icon: path.join(__dirname, 'logo.png') }) } }

Ignore Space Show notes View

build/oldWebpack/webpack5/utils.js 0 → 100644

'use strict'
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const packageConfig = require('../package.json')

exports.cssLoaders = function (options) {
  options = options || {}

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

// generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

if (options.extract) {
      loaders.unshift({
        loader: MiniCssExtractPlugin.loader,
        options: {},
      })
      return loaders;
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  // console.log(' styleLoaders : ' , JSON.stringify(output));
  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

return (severity, errors) => {
    if (severity !== 'error') return

const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

Ignore Space Show notes View build/oldWebpack/webpack5/vue-loader.conf.js 0 → 100644
'use strict' const utils = require('./utils') const isProduction = process.env.NODE_ENV === 'production' module.exports = { loaders: utils.cssLoaders({ sourceMap: false, extract: isProduction }), cssSourceMap: false, // cacheBusting: config.dev.cacheBusting, transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } }

Ignore Space Show notes View build/oldWebpack/webpack5/webpack.base.conf.js 0 → 100644
//考虑用，parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-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; const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap( module.exports = { //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 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: './' }, //如何寻找模块所对应的文件 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/ // 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]' // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[hash:7].[ext]' // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: "[hash:8].[name].[ext]", publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, // devtool: '#source-map', optimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin() // webpack 4 // new UglifyJsPlugin({ // uglifyOptions: { // compress: false, // } // }), // new OptimizeCSSPlugin({ // //开发环境 // // cssProcessorOptions:{ // // safe: true, map: { inline: false } // // }, // //打包生产 // cssProcessorOptions: { safe: true } // }), ], splitChunks: { chunks: 'all', cacheGroups: { vue: { name: 'vue', test: /[\\/]node_modules[\\/]vue[\\/]/, priority: -10 }, vuex: { name: 'vuex', test: /[\\/]node_modules[\\/]vuex[\\/]/, priority: -10 }, 'vue-router': { name: 'vue-router', test: /[\\/]node_modules[\\/]vue-router[\\/]/, priority: -10 }, 'element-ui': { name: 'element-ui', test: /[\\/]node_modules[\\/]element-ui[\\/]/, priority: -10 }, 'vendors': { name: 'vendors', test: /[\\/]node_modules[\\/]/, priority: -20 } }, } }, plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css' }), ], };

Ignore Space Show notes View

build/oldWebpack/webpack5/webpack.base.conf.js 0 → 100644

//考虑用，parallel-webpack  并发打包加快打包速度
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const utils = require('./utils')
const packageConfig = require('../package.json')
const vueLoaderConfig = require('./vue-loader.conf')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

//路径转换
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

Ignore Space Show notes View build/oldWebpack/webpack5/webpack.config.js 0 → 100644
'use strict' process.env.NODE_ENV = 'production' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const merge = require('webpack-merge') // 用来记录当前打包的模块路径列表 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','app','hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, chunksSortMode: 'dependency', compile: true })) webpackList.push(wpk); } module.exports = webpackList;

Ignore Space Show notes View

build/oldWebpack/webpack5/webpack.config.js 0 → 100644

'use strict'
process.env.NODE_ENV = 'production'

require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const merge = require('webpack-merge')

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','app','hiui', MODULE_NAME],
      minify: {
        removeComments: true,//去除注释
        collapseWhitespace: true,//是否去除空格
        removeAttributeQuotes: true//去除空属性
      },
      chunksSortMode: 'dependency',
      compile: true
    }))
  webpackList.push(wpk);
}

module.exports = webpackList;

Ignore Space Show notes View build/utils.js
'use strict' const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const packageConfig = require('../package.json') exports.cssLoaders = function (options) { options = options \|\| {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } if (options.extract) { loaders.unshift({ loader: MiniCssExtractPlugin.loader, options: {}, }) return loaders; } 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) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } // console.log(' styleLoaders : ' , JSON.stringify(output)); return output } exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { if (severity !== 'error') return const error = errors[0] const filename = error.file && error.file.split('!').pop() notifier.notify({ title: packageConfig.name, message: severity + ': ' + error.name, subtitle: filename \|\| '', icon: path.join(__dirname, 'logo.png') }) } } 'use strict' const path = require('path') // const config = require('./config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json') // exports.assetsPath = function (_path) { // const assetsSubDirectory = process.env.NODE_ENV === 'production' // ? config.build.assetsSubDirectory // : config.dev.assetsSubDirectory // return path.posix.join(assetsSubDirectory, _path) // } exports.cssLoaders = function (options) { options = options \|\| {} const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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' }) } 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) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output } exports.createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { if (severity !== 'error') return const error = errors[0] const filename = error.file && error.file.split('!').pop() notifier.notify({ title: packageConfig.name, message: severity + ': ' + error.name, subtitle: filename \|\| '', icon: path.join(__dirname, 'logo.png') }) } }

Ignore Space Show notes View

build/utils.js