Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
my basic webpack config for typescript projects
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: ['./src/main.ts', './src/scss/styles.scss' ],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.json', '.scss', '.js', '.ts'],
},
devServer: {
contentBase: './src'
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [
[
path.resolve(__dirname, 'node_modules'),
],
],
options: {
transpileOnly: true,
experimentalWatchApi: true,
},
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.wav$|\.mp3$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}]
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
},
plugins: [
// you may not need the following part or change the pattern in case you build and deploy your page.
new CopyWebpackPlugin({
patterns: [
{ from: 'src/images', to: 'images'},
{ from: 'src/fonts', to: 'fonts'},
{ from: 'src/favicon.ico', to: ''}
]
}),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment