webpack-config-zero v0.5.0

webpack-config-zero

webpack.config 零配置定制化生成器

why?

• webpack 配置繁琐、复杂（蛋疼）
• webpack 很多项目在搭建脚手架时都是复制之前项目的 webpack.config.js 配置
• 如果有多套脚手架工程，当 webpack 的升级，配置优化和调整，这些脚手架需要逐一修改

How to use?

安装

webpack-config-zero 需要 webpack v4+ 以及 NodeJS v8+

npm i --save-dev webpack-config-zero

webpack 依赖

npm i --save-dev webpack webpack-cli webpack-dev-server

webpack loaders

npm i --save-dev @babel/core babel-loader style-loader css-loader node-sass sass-loader postcss-loader url-loader file-loader html-loader resolve-url-loader

# 如果是 React 脚手架，为了正常启用热更新，你需要安装 react-hot-loader
npm i --save-dev react-hot-loader@next

# 如果是 Vue 脚手架，你需要安装额外的 loader
npm i --save-dev vue-loader vue-template-compiler

webpack plugins

html-webpack-plugin with alpha version

webpack v4 使用了动态分割 chunk（splitChunks） 的功能，在多入口、多页面模式下，html-webpack-plugin 的现有版本没有很好的办法解决一个 html 只插入当前 entry 的依赖 chunks。默认状态下会把所有 chunks 插入，或者通过 opions.chunks 或者 options.excludeChunks 来解决，但 splitChunks 需要做大量的改动，且效果不是非常理想。现在， html-webpack-plugin@next 版本中似乎解决了这个问题。

npm i --save-dev html-webpack-plugin@next

plugins for build production

npm i --save-dev clean-webpack-plugin copy-webpack-plugin mini-css-extract-plugin uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin inline-manifest-webpack-plugin 

others

npm i --save-dev @babel/preset-env webpack-merge

安装推荐可选依赖

npm i --save-dev autoprefixer postcss-px2rem

TypeScript

安装 NPM 依赖包:

npm i --save-dev typescript ts-loader

在项目根目录中，新建文件 tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": [
    "./src/**/*"
  ]
}

如果是 React 脚手架，需要增加 tsconfig.json 配置项：

{
  "compilerOptions": {
    ...
+   "jsx": "react"
  },
  ...
}

如果是 Vue 脚手架，需要在 src/ 下新建声明文件 vue-shims.d.ts：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

更多 TypeScript 配置，请参考：

• TypeScript Babel Starter
• TypeScript React Starter
• TypeScript Vue Starter

目录规范

单页

.
├── dist
├── lib
├── src
│   ├── config
│   │   └── public-path.js
│   ├── containers
│   │   ├── index.html
│   │   └── index.js
│   └── styles
├── .babelrc
└── webpack.config.js

多页

.
├── dist
├── lib
├── src
│   ├── config
│   │   └── public-path.js
│   ├── containers
│   │   ├── About
│   │   │   ├── about.scss
│   │   │   ├── app.js
│   │   │   ├── index.html
│   │   │   └── index.js
│   │   └── Home
│   │       ├── app.js
│   │       ├── home.scss
│   │       ├── index.html
│   │       └── index.js
│   └── styles
├── .babelrc
└── webpack.config.js

配置

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

webpack.config.js

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

package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0 --port 3003",
    "build": "NODE_ENV=production webpack --progress --colors"
  },
}

Run

开发环境

npm start

生产构建

npm run build

windows 系统需要另外安装 cross-env 依赖包：

npm i --save-dev cross-env

修改 npm scripts：

"scripts": {
-  "build": "NODE_ENV=production webpack --progress --colors"
+  "build": "cross-env NODE_ENV=production webpack --progress --colors"
},

Options

runtimePublicPath:

// public-path.js
__webpack_public_path__ = process.env.RUNTIME_PUBLIC_PATH;

// entry.js
import './public-path.js'
// import other modules

参见：webpack 官方指南

include

通过 options 传入的参数会和默认值合并：

默认配置无法满足怎么办？

安装 webpack-merge，然后扩展默认配置：

const zeroConfig = require('webpack-config-zero');
const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(
  zeroConfig( /* options */ ), 
  { /* webpack config options */ }
);

根据不同环境扩展默认配置：

let config = zeroConfig( /* options */ );

if (process.env.NODE_ENV !== 'production') {
  config = webpackMerge(config, { /* webpack dev config options */ });
} else {
  config = webpackMerge(config, { /* webpack prod config options */ });
}

module.exports = config;

License

MIT