# KsPack打包库

**Repository Path**: personal_utils/kspack

## Basic Information

- **Project Name**: KsPack打包库
- **Description**: Webpack打包库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-07-25
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#gulp + webpack构建库
零. 注意点:
  0. 大量缓存问题, 注意重启, 重装 node_modules
  1. node_modules文件夹直接复制,会出现快捷方式失效, 导致读取包失败!
  2. webpackConfig.alias 别名只在 webpack 编译后生效, 编译过程中的 require('xxx')勿使用别名

一. babel-loader: 
  0. jquery 等第三方库使用 babel-loader 转换会导致引用失败, 应在 babel-loader 配置中排除

  1.  读取 presets 和 plugins 失败 [跨目录]
      现象: 报错 Module build failed Error Couldn't find preset 'env' relative to directory ...

      原因: 因babel-loader读取模块路径,会优先使用项目相对目录下的node_modules, 但是跨目录打包架构中, node_modules是放在另一个build目录下,导致查找相对路径模块失败;

      解决: 
        方法一:  在项目目录下也install对应的 babel-presets 包 及对应插件 (注意版本保持与kspack一致)

        方法二: 修改 node_modules\babel-core\lib\helpers\resolve-preset.js 和 resolve-plugin.js的 16行, 更改
              // var dirname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : process.cwd();
              var dirname = process.cwd();//强制使用 cwd 目录下的 presets

        方法三: 在文件: node_modules\babel-core\lib\transformation\file\options\option-manager.js 第290行, 更改
          // presetLoc = (0, _resolvePreset2.default)(val, dirname); //DOCHANGED 
          presetLoc = (0, _resolvePreset2.default)(val); //强制使用 cwd 目录下的 presets
          var dirname = process.cwd();
        plugin 同修改对应文件;

  2.  读取 .babelrc 失败  [跨目录]
      现象: 
        配置 .babelrc 无效 即使 options 中指定 .babelrc属性,  调试源码中已读入属性, 依然无效果. 源码位置 node_modules\babel-loader\lib\resolve-rc.js

      原因: 
        估计是由 v6.2.5 版本  resolve the .babelrc relative to the file path rather than the cwd (current working directory).

      解决: 
        方法一: 无, 直接写在 webpack 配置中, 或写成 json 文件手工 import 到 webpack 中

二. vue-loader:
  1. 加载 postcss-loader 失败, 依旧是跨目录引发, 项目目录下安装postcss-loader及对应插件即可


三. vux 
  1.  vuxLoader.merge后报错
      原因: webpack@3.x废弃loader的 query参数 ,改为 options
      解决: kspack/node_modules/vux-loader/src/index.js 第375行, 对应 query 参数 改为 options参数 

  2.  vuxLoader build后报错
      原因: vux的 babel-loader 配置加载失败(因跨文件), 导致 JS压缩失败
      解决: kspack\node_modules\vux-loader\src\index.js 注释掉 393行 set compiling vux js source 部分(可不注释但是有冗余); 在 kspack/build/webpack.config.base.js 的loader配置项中手动添加babel-loader;
        { 
          test: /node_modules.*vux.src.*?js$/,
          loader: 'babel-loader',
          options: babelrc
        }

  3. vux-loader因大量依赖根目录读取vux文件,所以vux-loader和vux都放在kspack下较佳
  4. 跨目录时, vux-loader 路径自动指定到 项目 目录下会出现载入失败, babel-loader 转换失败 !!! 尝试手动指定vux-loader路径至 kspack 下

四. unit测试(karma)
    1. 跨目录路径问题严重,指定别名, webpackConfig 中 排序;