webpack-config-creator
My tool for fast creating a webpack developing environment easily, and also for memorizing.
It is recommended to install cross-env
together to pass NODE_ENV in your command line.
Install
npm install webpack-config-creator --dev// oryarn add webpack-config-creator -D
Usage
In your webpack config file like webpack.config.js
const getConfig = ; // define env variableprocessenvCDN = '/cdn/assets/'; const config = ; moduleexports = config;
above will use an default base config as following:
you can easily overwrite these by using extend
option
const config = entry: output: path: publicPath: '/' optimization: splitChunks: chunks: 'all' resolve: extensions: '.mjs' '.js' '.vue' '.json' '.scss' '.svelte' alias: '@': ;
Settings
mode
just the webpack config mode
rules
- type:
Array(String[, String])
- allowed rules:
babel
,css
,scss
,vue-scss
,eslint
,vue
,url
,file-url
,svelte
babel
This will inject default babel loaders with following settings, you can also overwrite it by your .babelrc
...etc.
- default dependencies:
babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime
resolve
get path from your root folder of project
moduleexporst = test: /\.js$/ loader: 'babel-loader' exclude: // include: options: presets: '@babel/preset-env' modules: false comments: false plugins: '@babel/plugin-syntax-dynamic-import' '@babel/plugin-transform-runtime' ;
css
since the postcss-loader
is used by default if you use the css related rules, there should be a browserslists
in your package.json.
- default dependencies:
style-loader css-loader mini-css-extract-plugin postcss-loader autoprefixer
const MiniCssExtractPlugin = ; const isProd = processenvNODE_ENV === 'production'; const styleLoader = loader: 'style-loader' options: {}; const cssLoader = loader: 'css-loader' options: sourceMap: true esModule: false ; const postcssLoader = loader: 'postcss-loader' options: postcssOptions: plugins: 'autoprefixer' ; moduleexports = test: /\.css$/i use: isProd ? MiniCssExtractPluginloader : styleLoader cssLoader postcssLoader ;
scss
Almost same as above css
- default dependencies: css deps +
sass sass-loader
//... const sassLoader = loader: 'sass-loader' options: sourceMap: true ; moduleexports = test: /\.s?css$/i use: isProd ? MiniCssExtractPluginloader : styleLoader cssLoader postcssLoader sassLoader ;
eslint
should include the eslint config in package.json
before using this.
And since the eslint-plugin-vue has two version, please manually install it into your node_modules rely on your usage version of vue.
please refer: eslint-plugin-vue
- default dependencies:
eslint eslint-loader babel-eslint
// default eslint loader settingmoduleexports = test: /\.$/ loader: 'eslint-loader' enforce: 'pre' include: options: emitWarnings: true ;
url
- default dependencies:
url-loader
moduleexports = test: /\.?$/ loader: 'url-loader' options: limit: 1000 name: '[name].[ext]' outputPath: 'img' esModule: false ;
file-url
same as url
, add fallback to file-loader
- default dependencies:
url-loader file-loader
moduleexports = // ...same to url options: // ...same to url fallback: require ;
vue-scss
just replace the style-loader
to vue-style-loader
, and will auto add VueLoaderPlugin
into the config's plugins. If you are using vue3.x, please install the beta version of vue-loader vue-loader@16.0.0-beta.7
- default dependencies: above sass deps +
vue-loader
vue
vue
& vue-loader
& compiler
has to be installed by yourself, no matter vue2, vue3,the setting is the same, just install the version, will auto handle the compiler for it.
be aware that vue2 use the compiler named
vue-template-compiler
, which vue3 is@vue/compiler-sfc
, do not install them together into your deps.
moduleexports = test: /\.vue$/ use: 'vue-loader';
svelte
- default dependencies:
svelte@3.29.0 svelte-loader@2.13.6 svelte-preprocess@4.5.1
const autoPreprocess = ; moduleexports = test: /\.svelte$/ exclude: /node_modules/ loader: 'svelte-loader' options: preprocess: ;
devServer
use default devServer settings as following:
- type:
Boolean
||Object
- default dependencies:
webpack-dev-server
moduleexports = host: '0.0.0.0' disableHostCheck: true inline: true hot: true historyApiFallback: true overlay: errors: true ;
if an object is provided, will use Object.assign
to merge with default settings.
defineEnv
env variables should be defined into webpack, use definePlugin
.
- type:
Array(String[, String])
you should define the env variables before geting the config, just as demo shows
defineSass
define sass prepend datas
- type:
Object({ injectEnv, data })
- injectEnv
- type:
Boolean
- what: whether auto inject all env variables into sass variables before data
- type:
- data
- type:
String
- what: scss text to be prepend
- type:
- injectEnv
moduleexports = defineSass: injectEnv: true // this will auto inject all the env variable into "data" data: '$node-env: ' + processenvNODE_ENV + ';' // additionalData for sass options ;
template
whether use html-webpack-plugin with default settings
- type:
Boolean
moduleexports = template: filename: 'index.html' inject: true minify: isProd ? removeComments: true collapseWhitespace: true removeAttributeQuotes: true : false;
extend
customize your webpack config with this, you can provide both Object
or Function
to adjust the default webpack config
Object
will be auto merged with webpack-merge
.
Function
will not, so remember to return the config after adjusting.
// as Objectconst myConfig = // as Functionconst myConfig =
License
Copyright (c) 2020-present, Johnny Wang