可插入的Webpack配置
创建WebPack加载程序配置可能很耗时。
该项目试图满足最常见的加载程序要求： ts ， js ， scss ， fonts和images 。
而不是从GitHub和Stackoverflow复制加载程序配置，您只需添加以下插件之一即可。
必需的WebPack版本
每个插件的兼容版本的WebPack版本可能会有所不同peerDependencies并在每个package.json文件中记录下来。
快速概述
npx generate-webpack-config
另外，您也可以使用在线配置工具开始。
零配置示例
WebPack本身提供了许多默认值，因此您可以在没有webpack.config文件的情况下运行common-config-webpack-plugin ：
npm i --save-dev webpack webpack-cli common-config-webpack-plugin
npx webpack --plugin common-config-webpack-plugin零配置WebPack-dev-server示例
您甚至可以在没有配置的情况下设置整个开发服务器：
npm i --save-dev webpack common-config-webpack-plugin html-webpack-plugin
webpack-dev-server --plugin common-config-webpack-plugin --plugin html-webpack-pluginWebpack配置
许多项目将需要一些特定项目的选项。 common-config-webpack-plugin套件设计为可插入，因此您只能选择所需的东西并将其与配置结合在一起。默认情况下，插件配置将根据您的WebPack模式设置进行调整。
common-config-webpack-plugin
├── js-config-webpack-plugin
├── ts-config-webpack-plugin
├── scss-config-webpack-plugin
└── asset-config-webpack-plugin
├── font-config-webpack-plugin
└── image-config-webpack-plugin
全部使用它们
首先，您只需一次添加所有common-config-webpack-plugin零件即可。
const CommonConfigWebpackPlugin = require ( 'common-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new CommonConfigWebpackPlugin ( ) ] ,
} ;这将与
const JsConfigWebpackPlugin = require ( 'js-config-webpack-plugin' ) ;
const TsConfigWebpackPlugin = require ( 'ts-config-webpack-plugin' ) ;
const ScssConfigWebpackPlugin = require ( 'scss-config-webpack-plugin' ) ;
const FontConfigWebpackPlugin = require ( 'font-config-webpack-plugin' ) ;
const ImageConfigWebpackPlugin = require ( 'image-config-webpack-plugin' ) ;
module . exports = {
plugins : [
new JsConfigWebpackPlugin ( ) ,
new TsConfigWebpackPlugin ( ) ,
new ScssConfigWebpackPlugin ( ) ,
new FontConfigWebpackPlugin ( ) ,
new ImageConfigWebpackPlugin ( ) ,
] ,
} ;仅使用JavaScript（.js＆.jsx＆.mjs）
?️js js-config-webpack-plugin readme
开发webpack.config.js
生产webpack.config.js
js-config-webpack-plugin是Create-React-App最佳实践的修改版本。
默认情况下，插件配置将根据您的WebPack模式设置进行调整。
const JsConfigWebpackPlugin = require ( 'js-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new JsConfigWebpackPlugin ( ) ] ,
} ;仅使用Typescript（.ts＆.tsx）
?️ts ts-config-webpack-plugin readme
开发webpack.config.js
生产webpack.config.js
ts-config-webpack-plugin是TS-Loader最佳实践的修改版本。
默认情况下，插件配置将根据您的WebPack模式设置进行调整。
const TsConfigWebpackPlugin = require ( 'ts-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new TsConfigWebpackPlugin ( ) ] ,
} ;仅使用样式（.css＆.scss）
?️scss scss-config-webpack-plugin readme
开发webpack.config.js
生产webpack.config.js
scss-config-webpack-plugin是Create-React-App最佳实践的修改版本。
默认情况下，插件配置将根据您的WebPack模式设置进行调整。
const ScssConfigWebpackPlugin = require ( 'scss-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new ScssConfigWebpackPlugin ( ) ] ,
} ;仅使用资产（字体和图像）
?️Asset asset-config-webpack-plugin readme
asset-config-webpack-plugin只是font-config-webpack-plugin和image-config-webpack-plugin周围的包装器。
const AssetConfigWebpackPlugin = require ( 'asset-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new AssetConfigWebpackPlugin ( ) ] ,
} ;仅使用字体（.Woff＆.Woff2）
?️font font-config-webpack-plugin readme
开发webpack.config.js
生产webpack.config.js
font-config-webpack-plugin将允许您使用Woff-Fonts。
const FontConfigWebpackPlugin = require ( 'font-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new FontConfigWebpackPlugin ( ) ] ,
} ;仅使用图像（.gif＆.jpg＆.jpeg＆.png＆.svg）
?️ image-config-webpack-plugin readme
开发webpack.config.js
生产webpack.config.js
image-config-webpack-plugin将允许您使用JS和CSS文件中的图像。
const ImageConfigWebpackPlugin = require ( 'image-config-webpack-plugin' ) ;
module . exports = {
plugins : [ new ImageConfigWebpackPlugin ( ) ] ,
} ; 质量检查
common-config-webpack-plugin套件为Windows和Unix的加载程序配置提供了类型和集成测试。
同行依赖
common-config-webpack-plugin具有直接的依赖性对babel和ts的依赖性。
但是，如果您需要选择特定版本，则可以使用js-config-webpack-plugin或ts-config-webpack-plugin使用对等依赖性。
执照
common-config-webpack-plugin已获得MIT许可。
通过命令行克隆项目: