This package has been deprecated

Author message:

已重构为 @hammal/cli-service

webpack Config Cheese

webpack.config 简易化配置器，让 webpack 配置变得简单

该配置器已不再维护！ 如果你希望继续使用，请转移到 webpack-config-zero。

why?

• webpack 配置繁琐、复杂
• webpack 配置又过于灵活，很多时候在项目初始化时都采用 ctrl + c，ctrl + v 的方式复制之前项目的 webpack.config.js 文件
• 自己创建的多个类型的项目脚手架，针对 webpack 的版本升级、优化，或者打包策略调整时这些脚手架需要逐个修改

How to use?

带“*****”号为可选步骤。

1. 安装 Babel 相关依赖：

   npm i --save-dev babel-core babel-loader babel-preset-env

   在项目根目录下配置 .babalrc：

   {
     "presets": [
       [
         "env",
         {
           "modules": false
         }
       ]
     ]
   }

   ***** 安装 React 需要的代码转换器：

   npm i --save-dev babel-preset-react

   ***** 修改 .babelrc：

   {
     "presets": [
   +   "react",
       ...
     ]
   }

2. 安装 postcss-loader 以及其插件的相关依赖：

   npm i --save-dev postcss-loader autoprefixer

   在项目根目录下配置 postcss.config.js：

   module.exports = {
     plugins: [
       require('autoprefixer')
     ]
   };

   ***** 安装 postcss-loader 插件（移动端项目）

   npm i --save-dev postcss-px2rem px2rem

   ***** 修改 postcss.config.js ，增加 px2rem 配置：

   +const px2rem = require('postcss-px2rem');
    
   module.exports = {
     plugins: [
       ...
       
   +   px2rem({
   +     remUnit: 75
   +   })
     ]
   };

   在项目根目录下配置 .browserslistrc 文件：

   # Browsers that we support 
    
   > 1%
   last 5 versions
   ie 11

3. 安装 webpack，需要安装 2.0 之后的版本：

   npm install --save-dev webpack@">=2.0.0 < 4.0.0"

4. ***** 如果是纯前端项目，推荐直接安装 webpack-dev-server 依赖：

   npm install --save-dev webpack-dev-server

5. ***** 安装 react-hot-loader ，可开启 React 热更新功能（默认开启），注意要 3.0 之后的版本。如果是非 React 项目，且不准备安装该模块，注意在 options 中关闭 reactHotLoader 功能：

   npm install --save-dev react-hot-loader@^3.0.0

   ***** 修改 .babelrc ，增加 react-hot-loader 的相关配置：

   {
     ...
     
     "plugins": [
       "react-hot-loader/babel"
     ]
   }

6. ***** 如果是 Aconite Node（HJ 内部 Node 框架，之后会考虑自研一套，还在规划中）的前后端不分离项目，开发环境需要安装 koa 中间件：

   npm install --save-dev @hujiang/aconite-webpack koa-webpack-dev-middleware koa-webpack-hot-middleware

   注意，前端代码是位于 /assets/src 下的。

7. 现在可以安装我的神器了：

   npm install --save-dev webpack-config-cheese

8. 最后，修改你项目下的 webpack.config.js ，并引入该神器：

   const cheese = require('webpack-config-cheese');
   module.exports = cheese.buildConfig({ /* options */ });

方法和属性

buildConfig( options )

构建 webpack.config 对象的方法，会根据不同编译环境（NODE_ENV 或者 npm script）生成并返回 webpack.config.js 需要的配置对象。

options

属性	数据类型	默认值	说明
compilePaths	Object	参见下表	需要额外执行 loader 的路径，比如某些 node_modules 下的依赖包（就是本人，呵呵），是没有进行过 loader （ES6, SASS等）转换的
polyfills	Object	{ 'babel-polyfill': true, 'whatwg-fetch': true }	内置的 ES6、fetch 相关的 polyfill，可以设置 false 来关闭
spa	Boolean	true	单页、多页项目的配置选项。如果设置为 true，入口文件为 src/index.js，html 模版为 src/index.html（Aconite Node - HJ 内部项目不使用）。如果为 false，入口文件为 src/containers下的各子目录的 index.js，html 模版为各子目录下的 index.html（Aconite Node - HJ 内部项目不使用），编译输出时，多页模式下的页面名称根据子目录命名，并忽略大小写，如：containers/Home/index.html，输出为 home.html。
cssModule	Boolean	true	开启 cssModules。设置为 true 时，默认会把 src/styles 下的 css 代码中的 classname 做为global 处理，不再需要额外声明 :global。
reactHotLoader	Boolean	true	开启 react-hot-loader，react-hot-loader 版本需要大于 3.0，且需要手动配置 .babelrc，见上面的安装步骤。
runtimePublicPath	Boolean, String	true	webpack 的动态 publicPath 模块路径，如果为 true，默认使用 /src/config/public-path.js 路径作为该模块。也可以直接传入自定义路径。另外，在 Node 项目的 View 模板中需要在 window 上输出一个 global 变量，比如：window.static_public_path = '{{ core.staticPublicPath }}'。在需要分割异步 chunk 时，非常有用，参见：Public Path。
hostsSplitting	Boolean	false	生产环境分离出 hosts.js，如果在编译后的代码中经常需要修改 api host 来调试，可以开启该功能，但要预先定义 constents/hosts.js 这个模块来分离出 hosts 变量。
nodeDevServer	Boolean	false	如果是 Aconite Node 的项目（HJ 内部项目），需要开启该设置，否则就要安装 webpack-dev-server
libChunks	Array	[]	生产环境下将指定的第三方模块分离到独立的 lib.js chunk 中
manifestOutput	String	'manifest.json'	manifest 文件的自定义输出路径及名称，输出路径基于 webpack 的 output.path，示例：'../../manifest.json'。
manifestPublicPath	String	''	输出的 manifest 中的映射路径会加上该前缀，功能类似于 webpack 的 output.publicPath
projectInfo	Object	null	如果设置该参数，同时参数值包含：name, title 字段，编译后将输出 [project-name].json 文件，。输出的文件中将包含：name, title，以及上面的 manifest 资源映射，该参数用于 HJ 内部项目。
projectInfoOutput	String	'project.json'	[project-name].json 文件的自定义输出路径及名称，输出路径基于 webpack 的 output.path，示例：'../../project.json'，该参数用于 HJ 内部项目。

compilePaths

如果传入 compilePaths 下的配置参数，会和下方的默认值合并：

属性	数据类型	默认值	说明
babel	Array	[ '/src' ]	需要 babel-loader 编译的目录路径
css	Array	[ '/src', '/node_modules/sanitize' ]	需要 css-loader 编译的目录路径，支持：*.css, *.scss, *.less
cssModules	Object	{ global: [ '/src/styles', '/node_modules/sanitize' ], local: [ '/src' ] }	需要开启 css-loader 的 CSS-MODULES 的路径，支持：*.css, *.scss, *.less。注意： 参数 global 下的目录是不会被 CSS-MODULES 执行的目录，这些目录下的代码中不需要手动声明 :global。
res	Array	[ '/src' ]	需要 file-loader 处理的目录路径，支持：*.jpg, *.png, *.gif, *.svg, *.eot, *.woff, *.ttf, *.svg, *.mp3

env

webpack 编译时的环境变量，可能的值：dev, qa, production，暂时先这么定义，与当前 HJ 内部项目相关。

buildConfig 构建出的配置项无法满足？

可以安装 webpack-merge，然后扩展 buildConfig() 生成后的配置对象：

...
const webpackMerge = require('webpack-merge');
 
module.exports = webpackMerge(
  cheese.buildConfig( /* options */ ), 
  { /* webpack config options */ }
);

还可以根据不同环境来配置 webpack 扩展项：

let config = cheese.buildConfig( /* options */ );
 
if (config.env === 'dev') {
  config = webpackMerge(config, { /* webpack dev config options */ });
} else {
  config = webpackMerge(config, { /* webpack prod config options */ });
}
 
module.exports = config;
 

构建环境规范

目录规范

 ├── dist // 编译输出目录
 ├── lib // 存放第三方非模块化(node_modules)的代码库，如果有的话。发布时，需要手动上传到 res.hjfile.cn/tool/lib/ 下 (HJ 内部使用)
 └── src // 源码目录
     ├── constants
     │   └── hosts.js // 配置不同环境下 api 接口的 host 变量，验证、生产环境不会被压缩，便于修改调试
     ├── containers // 页面容器目录（只有多页需要以下规范，每个目录表示一个页面）
     │   ├── App
     │   │   ├── index.html // Aconite Node 项目不需要
     │   │   ├── index.js // 如果开启 react-hot-loader，该模块作为热更新的入口，页面逻辑约定在 main.js 中，具体见：react-mpa 脚手架项目
     │   │   └── main.js // 只有在 react 多页脚手架中出现
     │   └── Page2
     │       ├── index.html
     │       ├── index.js
     │       └── main.js
     ├── styles // 如果开启 css-modules，该目录会自动做为 global 模式编译，不需要手动在 css 中声明 ":global"
     ├── index.html // 在 spa 模式中出现（Aconite Node 项目不需要）
     └── index.js // 在 spa 模式中出现

package.json 的 scripts 规范

纯前端项目

"scripts": {
  "start": "webpack-dev-server --hot --inline --history-api-fallback --progress --colors --host 0.0.0.0 --port 3003",
  "build:qa": "webpack --progress --colors",
  "build:yz": "cross-env NODE_ENV=production webpack --progress --colors",
  "build:prod": "cross-env NODE_ENV=production webpack --progress --colors"
}

Aconite Node （HJ 内部项目）前后端不分离项目

"scripts": {
    "bundle": "cross-env NODE_ENV=production webpack --config assets/build/webpack.config.js --progress"
  },