Skip to content

Instantly share code, notes, and snippets.

@vlio20
Created June 23, 2017 18:30
Show Gist options
  • Save vlio20/7d007e60bb6d95f916285fff5bdc09f4 to your computer and use it in GitHub Desktop.
Save vlio20/7d007e60bb6d95f916285fff5bdc09f4 to your computer and use it in GitHub Desktop.
webpack + typescript + react
{
"name": "Oogaday",
"version": "0.0.0",
"main": "index.js",
"author": "Vlad Ioffe",
"license": "MIT",
"scripts": {
"serve": "webpack-dev-server --config=webpack.dev.config.js"
},
"devDependencies": {
"@types/react": "^15.0.30",
"@types/react-dom": "^15.5.0",
"@types/react-router-dom": "^4.0.4",
"awesome-typescript-loader": "^3.1.3",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-loader": "^0.4.5",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"typescript": "^2.3.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.5.0"
},
"dependencies": {
"@types/react-router": "^4.0.11",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1"
}
}
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = () => {
return {
stats: {
assets: true,
cached: false,
cachedAssets: false,
children: false,
chunks: true,
chunkModules: false,
chunkOrigins: false,
colors: true,
depth: false,
entrypoints: false,
errors: true,
errorDetails: true,
maxModules: 0,
modules: true,
performance: false,
providedExports: false,
publicPath: true,
reasons: true,
source: false,
timings: true,
usedExports: false,
version: true,
warnings: false
},
performance: {
hints: false
},
entry: {
oogaday: require('path').resolve('./src/index.tsx'),
vendor: './src/vendor/vendor.ts',
},
output: {
path: require('path').resolve('./dist'),
filename: '[name].js',
publicPath: '/static/'
},
resolve: {
extensions: ['.js', '.ts', '.less', '.css', '.html', '.tsx'],
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.ts(x?)$/,
use: ['awesome-typescript-loader']
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
{
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
{
fallbackLoader: 'style-loader',
loader: 'css-loader!less-loader'
})
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: [
'file-loader?name=fonts/[name].[ext]?[hash]'
]
},
{
test: /\.(gif|png(2)?)(\?[a-z0-9=&.]+)?$/,
use: [
'file-loader?name=images/[name].[ext]?[hash]'
]
},
{
test: /\.html$/,
use: [
'html-loader'
]
}
]
},
plugins: [
new CheckerPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new ExtractTextPlugin('[name].css'),
new HtmlWebpackPlugin({
filename: 'index.html',
hash: false,
template: './src/index.html',
chunks: ['manifest', 'vendor', 'oogaday'],
inject: 'body',
chunksSortMode: 'dependency',
env: 'dev'
})
],
devServer: {
port: 3333,
inline: true,
stats: 'errors-only',
open: true,
publicPath: '/site/',
historyApiFallback: {
index: '/site/index.html'
},
proxy: {
'/static': {
target: 'http://localhost:3333',
pathRewrite: {'static': 'site'}
}
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment