webpack config plugins

可插入的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-plugin

Webpack配置

许多项目将需要一些特定项目的选项。 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许可。