hziflytek-webpack-cli
>This is a simple webpack-cli for our team. > >It mightbe fit your team
Last updated a month ago by issacsix .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install hziflytek-webpack-cli 
SYNC missed versions from official npm registry.

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

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

Current Tags

  • 1.2.6                                ...           latest (a month ago)

10 Versions

  • 1.2.6                                ...           a month ago
  • 1.2.5                                ...           a month ago
  • 1.2.4                                ...           a month ago
  • 1.2.3                                ...           a month ago
  • 1.2.2                                ...           a month ago
  • 1.2.1                                ...           a month ago
  • 1.2.0                                ...           a month ago
  • 1.1.1                                ...           3 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 84
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |