1.组件库webpack配置文件品读——antdvue（一）

1.webpack的基本操作通过前面几节已经有了大致的了解，剩下的就是去实践或品读开源项目了，这里我首先选择开源项目ant-design-vue的wbpack配置进行学习。

1.1首先看package.json——npm配置文件

更多npm配置可以参考 npm官方配置文件说明文档

{
    "name": "ant-design-vue",// 项目名
    "version": "1.5.4",// 版本号
    "title": "Ant Design Vue",// 发布到npm标题
    "description": "An enterprise-class UI design language and Vue-based implementation",// 描述，利于npm 搜索
    "keywords": [// npm 搜索关键字
        "ant",
        "design",
        "antd",
        "vue",
        "vueComponent",
        "component",
        "components",
        "ui",
        "framework",
        "frontend"
    ],
    "main": "lib/index.js",// commonjs入口 => require("ant-design-vue").Button导入
    "module": "es/index.js",// es2015 module入口 => import {Button} from "ant-design-vue"导入，关键字:tree-shaking性能优化,构建工具rollup 参考：https://segmentfault.com/a/1190000014286439
    "typings": "types/index.d.ts",// 库ts静态类型声明文件入口
    "files": [// 描述了将库作为依赖项安装时要包括的文件
        "dist",
        "lib",
        "es",
        "types",
        "scripts"
    ],
    "scripts": {// 终端运行脚本
        "dev": "webpack-dev-server",// webpack本地服务
        "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",// cross-env跨平台 定义环境变量
        "test": "cross-env NODE_ENV=test jest --config .jest.js",// jest单元测试
        "compile": "node antd-tools/cli/run.js compile",
        "pub": "node antd-tools/cli/run.js pub",
        "pub-with-ci": "node antd-tools/cli/run.js pub-with-ci",
        "prepublish": "node antd-tools/cli/run.js guard",// npm publish命令的生命周期脚本，参考：https://www.cnblogs.com/f1194361820/p/12509761.html
        "pre-publish": "node ./scripts/prepub",
        "prettier": "prettier -c --write '**/*'",
        "pretty-quick": "pretty-quick",// 格式化代码，格式化规则=>.prettierrc文件
        "dist": "node antd-tools/cli/run.js dist",
        "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./components",
        "lint:site": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue ./antdv-demo",
        "lint:docs": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.md ./antdv-demo/docs/**/demo/**",
        "lint:style": "stylelint \"{site,components}/**/*.less\" --syntax less",
        "codecov": "codecov",// 集成测试覆盖率工具 codecov,参考：https://www.jianshu.com/p/146c4769d4b1
        "postinstall": "node scripts/postinstall || echo \"ignore\"" //npm脚本钩子,参考: https://www.cnblogs.com/f1194361820/p/12509761.html
    },
    "repository": {// 指定代码管理工具以及存放的位置
        "type": "git",
        "url": "git+https://github.com/vueComponent/ant-design-vue.git"
    },
    "license": "MIT",// 遵守协议类型
    "bugs": {// git 提issue地址
        "url": "https://github.com/vueComponent/ant-design-vue/issues"
    },
    "homepage": "https://www.antdv.com/",
    "peerDependencies": {// 库依赖，会被同时安装或在npm@3时终端警告手动安装
        "vue": ">=2.6.0",
        "vue-template-compiler": ">=2.6.0"
    },
    "devDependencies": {// 开发依赖
    	...
    },
    "dependencies": {// 运行依赖
    	...
    },
    "sideEffects": [// 告诉webpack以下文件具有副作用，不可修剪。
        "site/*",
        "components/style.js",
        "components/**/style/*",
        "*.vue",
        "*.md",
        "dist/*",
        "es/**/style/*",
        "lib/**/style/*",
        "*.less"
    ]
}

可以看到一个库需要注意的细节真的很多，从代码风格统一，性能优化，多平台环境兼顾，自动化单元测试等等。

1.2 webpack.config.js文件——antvue里本地起服务用

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 控制index.html的输出
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 主要是处理vue相关文件的rule
const webpack = require('webpack');// webpack
const WebpackBar = require('webpackbar');// webpack build构建时终端显示进度条
const path = require('path');// node内部path模块

module.exports = {
  mode: 'development',// 开发环境
  entry: {// 入口文件,app=>别名，打包出dist/app.js
    app: './examples/index.js',
  },
  module: {
    rules: [
      {// 解析vue文件
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {// 解析js，jsx文件
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [// 不进行配置。babel-preset-env 与 babel-preset-latest行为相同
              'env',
              {// 此处进行了配置，配置项目在以下条件下所需的 polyfill 和 transform
                targets: {
                  browsers: [// 浏览器环境
                    'last 2 versions',// 每个浏览器最后两个版本
                    'Firefox ESR',// Firefox的长期支持版本
                    '> 1%', //
                    'ie >= 9',// ie9以上
                    'iOS >= 8',// ios 8及以上
                    'Android >= 4',// Android 4 及以上
                  ],
                },
              },
            ],
          ],
          plugins: [// babel 插件，这里有2，3，4插件很久没更新了，是不是有了更好的解决方案?
            'transform-vue-jsx',// 转化vue的jsx写法
            'transform-object-assign',// 转换Object.assign
            'transform-object-rest-spread',// 转换对象扩展运算符以及剩余参数
            'transform-class-properties',// 转换类属性
          ],
        },
      },
      {// 图片资源解析
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      },
      {// less文件解析，主要style-loader，css-loader，是less-loader能正常解析的前提
        test: /\.less$/,
        use: [
          { loader: 'vue-style-loader' },
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          { loader: 'less-loader', options: { sourceMap: true, javascriptEnabled: true } },
        ],
      },
      {// vue-style-loader类似css module的支持
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {// 解析文件
    alias: {// 路径别名。导入路径匹配到ant-design-vue，以'./components'为实际路径解析
      'ant-design-vue': path.join(__dirname, './components'),
    },
    extensions: ['.js', '.jsx', '.vue'], // 模块导入可以省略后缀
  },
  devServer: {
    host: 'localhost',// 域名。0.0.0.0，允许其他人通过本机ip访问
    port: 3002,//端口
    historyApiFallback: {// 匹配到./,都重写为index.html。常用404?
      rewrites: [{ from: /./, to: '/index.html' }],
    },
    disableHostCheck: true,// 禁止域名校验
    hot: true,//hot load
    open: true,// 自动打开网页
  },
  devtool: '#source-map',// 此处存疑，"#"什么意思?此处当作source-map=>定位到原始源代码行列，支持生产环境，构建性能较低
  plugins: [
    new webpack.HotModuleReplacementPlugin(),// 热更新 | 热替换
    new HtmlWebpackPlugin({
      // 以此为模板输出为文件名index.html
      template: 'examples/index.html', 
      filename: 'index.html',
      inject: true,// true=>当为true时，所有的js资源将在body标签底部引入
    }),
    new VueLoaderPlugin(),//主要是处理vue相关文件的rule
    new WebpackBar(),//webpack build构建时终端显示进度条
  ],
};