Noodles, Poodles and More!

    hziflytek-webpack-cli

    1.2.6 • Public • Published

    hziflytek-webpack-cli

    This is a simple webpack-cli for our team.

    It mightbe fit your team

    Features

    hziflytek-webpack-cli 满足一般团队的普通需求,在webpack4.0 的基础上,真正实现开箱即用。

    hziflytek-webpack-cli 可提供:

    • 多页面构建(根据入口文件自动配置)
    • 公共文件提取、分包(import 的次数超过2次)
    • es6,es7 语法转换
    • 支持 jsx 语法
    • sass 预处理
    • css 前缀自动补全
    • px 单位自动转换rem
    • file-loader
    • css 文件提取 • 每次打包之前自动删除旧代码
    • 文件指纹
    • css,js 文件压缩
    • html 内联css,js压缩并删除所有注释代码
    • 构建速度分析
    • 文件体积大小分析

    Install

    npm install hziflytek-webpack-cli -D
    

    安装以后 先检查 node_modules 目录下 包的目录结构是否为如下所示(自测过程中有发现错误的情况),如果没有正确下载,删除后重新下载一次

    ├── README.md
    ├── lib
    │   ├── base.config.js
    │   ├── buildAnalyze.config.js
    │   ├── dev.config.js
    │   └── prod.config.js
    ├── node_modules
    └── package.json

    Quick Example

    1. 安装 hziflytek-webpack-cli 工具

      npm install hziflytek-webpack-cli D
      
    2. 安装 webpack、webpack-dev-server、babel

      npm install webpack webpack-dev-server @babel/core -D
      
    3. package.json 添加脚本命令,如下:

      scripts: {
        "dev": "webpack-dev-server --config ./node_modules/hziflytek-webpack-cli/lib/dev.config.js --host x.x.x.x --port 3000",
          "build": "webpack --config ./node_modules/hziflytek-webpack-cli/lib/prod.config.js"
          "build:analyze": "webpack --config ./node_modules/hziflytek-webpack-cli/lib/buildAnalyze.config.js",
      }
    4. babel 配置及多页面插件配置

      1. 方法一:创建.babelrc

        {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ],
            "plugins": [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }

        方法二:package.json 配置,新增babel 配置项

        "babel"{
            "presets": [
                "@babel/preset-env",
            "@babel/preset-react"
            ],
            "plugins": [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }

      tips:

      1. 因为 scripts 中仍要使用到webpack, webpack-dev-server, 仍需提前 install

      2. dev 的环境配置如 ip、port 可通过 “--host” 等形式配置,也可以到源码 ./node_modules/hziflytek_webpack_cli/lib/dev.config.js 此配置文件进行修改

    5. 配置页面结构

      由于此脚手架支持多页面配置,多页面实现原理是遍历入口文件,因此对目录结构有一定程度的约束,所以这里要按照规定设计页面模块的结构,如下配置:

      root // 根目录
       ├──src  // 源码
          ├── entry // 入口文件夹(不能重命名)
          │   └── index // 页面名字(index / home / detail)
          │       └── index.js // 固定名称 index.js
          └── pages // 多页面模版文件夹
              └── index.html // 与entry 目录下的页面名字一一对应
      

      tip

      1. 若为 SPA entry 目录下仅新建一个文件夹防止对应入口文件即可

      2. 考虑到多页面需求下,不同的页面可能会需要不能自定义的模版,因此目前设计为 一个入口文件 对应相应的模版页面

    6. 编译、构建、分析

    开发环境编译

    npm run dev

    打包构建

    npm run build
    

    文件分析

    npm run build:analyze
    

    关于以上功能,如果各位同学有额外的诉求或者意见,欢迎一起来讨论,我们一起把这个前端脚手架工具优化的更加完美。。。

    Install

    npm i hziflytek-webpack-cli

    DownloadsWeekly Downloads

    0

    Version

    1.2.6

    License

    ISC

    Unpacked Size

    17.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • issacsix