Webpack config builder with included rules for typescript, styles (css and sass), fonts and images.
Following DRY principle. Many webpack controlled web-projects use the same configuration for optimal deployment. This library is aimed to gather all configuration blocks in one place and don't repeat them project to project.
The library is written in Typescript and compiled to ES6 JS.
npm install webpack-typescript-builder --save-dev
This will install you the following libraries (no need to duplicate in your config)
- Webpack
- Typescript
- TypeScript Loader
- Style Loader
- CSS Loader
- Optimize CSS Assets Plugin
- File Loader
- URL Loader
- SASS Loader
- Node SASS
- Ignore Loader
- Extract Text Plugin
- Import Glob
- TSLint Loader
- Fork TS Checker Webpack Plugin
- Cache Loader
- Thread Loader
Library exposes single configuration builder as well as other building blocks to use in configuration.
Usage
import { WebpackConfigBuilder } from "webpack-typescript-builder";
const configBuilder = new WebpackConfigBuilder({
bundle: ["./src/index"]
});
export default configBuilder.toUmdConfig("wwwroot");
This will generate webpack configuration that:
- Adds ts-loader and default resolve extensions '.js', '.jsx', '.ts', '.tsx'
- Adds images, fonts, style (css and sass) rules
- Adds Cache and Thread Loader for ts-loader. This option can be disabled if passing false as second argument to
WebpackConfigBuilder
constructor:
const configBuilder = new WebpackConfigBuilder({
bundle: ["./src/index"]
}, false); // this will disable parallel build which is enabled by default
The final wwwroot
folder will look as following
/bundle.js
/bundle.css
/fonts/...
/images/...
The whole webpack configuration looks as following:
{
stats: {
modules: false
},
entry: {
bundle: ["./src/index"]
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
output: {
path: '<your root project>/wwwroot/',
filename: '[name].js',
library: '[name]',
libraryTarget: 'umd',
publicPath: '/'
},
module: {
rules: [{
test: /\.(ts|tsx)?$/,
use: 'tslint-loader',
exclude: [/node_modules/]
}, {
enforce: "pre",
test: /\.scss$/,
use: "import-glob",
}, {
test: /\.(ts|tsx)?$/,
use: [
{ loader: "cache-loader" },
{ loader: "thread-loader", options: { workers: os.cpus().length - 1 } },
{ loader: "ts-loader", options: { happyPackMode: true } },
],
exclude: [/node_modules/]
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{ loader: 'css-loader?minimize' },
{ loader: "sass-loader" }
],
fallback: "style-loader"
})
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?minimize',
fallback: "style-loader"
})
}, {
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 4096,
name: "img/[name].[hash].[ext]"
}
}
}, {
test: /\.(eot|ttf|otf|woff|woff2|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 4096,
name: "fonts/[name].[hash].[ext]"
}
}
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin(),
new OptimizeCssAssetsPlugin(),
new ExtractTextPlugin("bundle.css")
]
}
toUmdConfig(outputPath: string, ...plugins: Plugin[]): Configuration
Configures output as UMD module inoutputPath
folder.toServerConfig(outputPath: string, ...plugins: Plugin[]): Configuration
Configures output as node (commonjs2) module inoutputPath
folder.
To simplify producing and consuming of dll across configuring without copy paste.
Produce DLL
import { Dll } from "webpack-typescript-builder";
export const vendorsDll = new Dll("vendors", "umd", "./.tmp");
...
/// Add vendorsDll.produce() to plugins array.
produce
method will return DllPlugin
Consume DLL
import { vendorsDll } from "./webpack.config.vendors";
...
/// Add vendorsDll.consume() to plugins array.
consume
method will return DllReferncePlugin
Rules could be imported as a collection or one by one:
- typescript
- parallelTypescript
- tslint
- sassStyles
- globSass
- styles
- images
- fonts
- ignoreSassStyles
- ignoreStyles
- imagesNoEmit
- fontsNoEmit
- getDefaultClientRules
- getDefaultServerRules
Library is very small. Take your time and explore src
folder yourself.
You may need to add sass-loader and node-sass to your project.
COPYRIGHT (C) 2017-2019 MOCODING, LLC