0.11.3 • Published 4 days ago
webpack-dev-service v0.11.3
webpack-dev-service
A koa 2 middleware for webpack development and hot reloading.
Usage
/**
* @module webpack
* @description Webpack config
*/
import Koa from 'koa';
import path from 'path';
import memfs from 'memfs';
import webpack from 'webpack';
import compress from 'koa-compress';
import dev from 'webpack-dev-service';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const progress = {
percentBy: 'entries'
};
const entryHTML = path.resolve('public/index.html');
const html = {
xhtml: true,
minify: false,
title: 'React',
filename: entryHTML,
templateParameters: { lang: 'en' },
template: path.resolve('index.ejs'),
favicon: path.resolve('src/images/favicon.ico'),
meta: { 'theme-color': '#4285f4', viewport: 'width=device-width,initial-scale=1.0' }
};
function createMemfs() {
const volume = new memfs.Volume();
const fs = memfs.createFsFromVolume(volume);
return fs;
}
function httpError(error) {
return /^(EOF|EPIPE|ECANCELED|ECONNRESET|ECONNABORTED)$/i.test(error.code);
}
const compiler = webpack({
name: 'react',
mode: 'development',
context: path.resolve('src'),
entry: path.resolve('src/index.tsx'),
output: {
publicPath: '/public/',
filename: `js/[name].js`,
path: path.resolve('public'),
chunkFilename: `js/[name].js`,
assetModuleFilename: `[path][name][ext]`
},
devtool: 'eval-cheap-module-source-map',
resolve: {
fallback: { url: false },
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
watchOptions: {
aggregateTimeout: 256
},
stats: {
colors: true,
chunks: false,
children: false,
entrypoints: false,
runtimeModules: false,
dependentModules: false
},
plugins: [
new HtmlWebpackPlugin(html),
new MiniCssExtractPlugin({
ignoreOrder: true,
filename: 'css/[name].css',
chunkFilename: 'css/[name].css'
}),
new webpack.ProgressPlugin(progress)
],
module: {
strictExportPresence: true,
rules: [
{
oneOf: [
{
test: /\.[jt]sx?$/i,
exclude: /[\\/]node_modules[\\/]/,
use: [
{
loader: 'swc-loader',
options: {
jsc: {
externalHelpers: true,
parser: {
tsx: true,
syntax: 'typescript'
},
transform: {
react: {
runtime: 'automatic'
}
}
},
env: {
targets: ['defaults', 'not IE >= 0']
}
}
}
]
},
{
test: /\.css$/i,
exclude: /[\\/]node_modules[\\/]/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
esModule: true,
modules: {
auto: true,
localIdentName: '[local]-[hash:8]',
exportLocalsConvention: 'camelCaseOnly'
}
}
}
]
},
{
test: /\.(svg|mp4)$/i,
type: 'asset/resource',
exclude: /[\\/]node_modules[\\/]/
}
]
}
]
}
});
const port = 8000;
const app = new Koa();
const fs = createMemfs();
const server = dev(compiler, {
fs,
headers: {
'Cache-Control': 'no-cache',
'X-Content-Type-Options': 'nosniff'
}
});
app.use(
compress({
br: false
})
);
app.use(server);
app.use(async ctx => {
ctx.type = 'text/html; charset=utf-8';
ctx.body = fs.createReadStream(entryHTML);
});
app.on('error', error => {
!httpError(error) && console.error(error);
});
app.listen(port, () => {
server.ready(() => {
server.logger.info(`server run at: \u001B[36mhttp://127.0.0.1:${port}\u001B[0m`);
});
});
Screenshot
0.11.3
4 days ago
0.11.2
27 days ago
0.11.1
1 month ago
0.11.0
2 months ago
0.10.1
2 months ago
0.10.2
2 months ago
0.10.0
2 months ago
0.9.0
2 months ago
0.8.1
2 months ago
0.8.0
2 months ago
0.7.2
2 months ago
0.7.1
2 months ago
0.7.0
2 months ago
0.6.1
4 months ago
0.5.20
5 months ago
0.6.0
5 months ago
0.5.19
5 months ago
0.5.18
6 months ago
0.5.16
6 months ago
0.5.17
6 months ago
0.5.15
7 months ago
0.5.10
8 months ago
0.5.11
8 months ago
0.5.8
9 months ago
0.5.7
9 months ago
0.5.9
8 months ago
0.5.14
7 months ago
0.5.12
8 months ago
0.5.13
7 months ago
0.5.4
10 months ago
0.5.3
10 months ago
0.5.6
9 months ago
0.5.5
9 months ago
0.5.2
11 months ago
0.5.1
12 months ago
0.5.0
12 months ago
0.4.0
12 months ago
0.3.1
12 months ago
0.3.0
12 months ago
0.2.0
12 months ago
0.1.3
12 months ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago