Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
webpack 2 config capable of loading font-awesome fonts
@import "~normalize-scss/sass/normalize";
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@import "bourbon";
const path = require('path');
const autoprefixer = require('autoprefixer');
var bourbon = require('node-bourbon').includePaths;
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
//=========================================================
// VARS
//---------------------------------------------------------
const NODE_ENV = process.env.NODE_ENV;
const IS_ELECTRON = process.env.IS_ELECTRON;
const ENV_DEVELOPMENT = NODE_ENV === 'development';
const ENV_PRODUCTION = NODE_ENV === 'production';
const ENV_TEST = NODE_ENV === 'test';
const HOST = '0.0.0.0';
const PORT = 3000;
//=========================================================
// LOADERS
//---------------------------------------------------------
const rules = {
js: {
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
//cacheDirectory: true,
presets: ['es2015']
}
},
json: {
test: /\.json$/,
loader: 'json-loader'
},
componentStyles: {
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
exclude: path.resolve(__dirname, 'src/app')
},
sharedStyles: {
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
// loaders: ["raw-loader", "sass-loader?sourceMap"],
include: path.resolve(__dirname, 'src/app')
},
/* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
html: {
test: /\.html$/,
use: 'raw-loader',
exclude: [path.resolve('src/index.html')]
},
typescript: {
test: /\.ts$/,
exclude: [/\.(spec|e2e)\.ts$/, /node_modules/],
//exclude: /node_modules/,
use: [
'awesome-typescript-loader',
'angular2-template-loader',
'angular2-router-loader'
]
},
fonts: {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
fa: [
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
],
faWP: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
],
images: {
test: /\.(png|jpe?g|gif|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
};
//=========================================================
// CONFIG
//---------------------------------------------------------
const config = module.exports = {};
config.resolve = {
extensions: ['.ts', '.js', '.scss', '.json'],
mainFields: ['module', 'browser', 'main'],
modules: [
path.resolve('.'),
path.resolve('node_modules')
]
};
config.module = {
rules: [
rules.js,
rules.json,
rules.typescript,
rules.html,
rules.images,
rules.componentStyles,
rules.fonts,
//rules.faWP[0],
//rules.faWP[1],
// rules.fa[2],
//rules.fa[3],
// rules.fa[4]
]
};
var fs = require('fs')
const nodeModules = {}
fs.readdirSync('node_modules')
.filter(x => {
return ['.bin'].indexOf(x) === -1
})
.forEach(mod => {
nodeModules[mod] = `commonjs ${mod}`
})
config.externals = [
nodeModules
]
console.log(['src/public'].concat(bourbon))
config.plugins = [
new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
//'process.env.SOUNDCLOUD_CLIENT_ID': JSON.stringify(process.env.SOUNDCLOUD_CLIENT_ID)
}),
new CopyWebpackPlugin([
{ from: 'src/package.json' },
{ from: 'src/e/**/*.js', to: './electron', flatten: true }
]),
new LoaderOptionsPlugin({
debug: false,
minimize: ENV_PRODUCTION,
options: {
postcss: [
autoprefixer({ browsers: ['last 3 versions'] })
],
resolve: {},
sassLoader: {
//data: "\$environmentVariable:3",
includePaths: ['src/public'].concat(bourbon),
// outputStyle: 'compressed',
precision: 10,
sourceComments: false
}
}
}),
new ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
path.resolve('src')
),
// new ForkCheckerPlugin()
];
//=====================================
// DEVELOPMENT or PRODUCTION
//-------------------------------------
if (ENV_DEVELOPMENT || ENV_PRODUCTION) {
config.entry = {
main: './src/main.ts',
polyfills: './src/polyfills.ts',
background: './src/bg.ts',
vendor: './src/vendor.ts'
};
config.output = {
path: path.resolve('./target'),
publicPath: './',
filename: '[name].bundle.js'
};
config.plugins.push(
new CommonsChunkPlugin({
name: ['polyfills'],
minChunks: Infinity
}),
new HtmlWebpackPlugin({
title: 'PhotoSpring - Main application',
chunkSortMode: 'dependency',
filename: 'index.html',
hash: false,
inject: 'body',
chunks: ['polyfills', 'main', 'vendor'],
template: './src/public/index.html'
}),
new HtmlWebpackPlugin({
title: 'PhotoSpring - Background operations',
chunkSortMode: 'dependency',
filename: 'background.html',
hash: false,
inject: 'body',
chunks: ['polyfills', 'background'],
template: './src/public/background.html'
})
);
}
//=====================================
// DEVELOPMENT
//-------------------------------------
if (ENV_DEVELOPMENT) {
config.devtool = 'cheap-module-source-map';
config.output.filename = '[name].js';
config.module.rules.push(rules.sharedStyles);
config.plugins.push(new ProgressPlugin());
config.devServer = {
contentBase: './src',
historyApiFallback: true,
host: HOST,
port: PORT,
stats: {
cached: true,
cachedAssets: true,
chunks: true,
chunkModules: false,
colors: true,
hash: false,
reasons: true,
timings: true,
version: false
}
};
}
//=====================================
// PRODUCTION
//-------------------------------------
if (ENV_PRODUCTION) {
config.devtool = 'hidden-source-map';
config.output.filename = '[name].[chunkhash].js';
config.module.rules.push({
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css?-autoprefixer!postcss!sass'),
include: path.resolve('src/shared/styles')
});
config.plugins.push(
new WebpackMd5Hash(),
new ExtractTextPlugin('styles.[contenthash].css'),
new UglifyJsPlugin({
comments: false,
compress: {
dead_code: true, // eslint-disable-line camelcase
screw_ie8: true, // eslint-disable-line camelcase
unused: true,
warnings: false
},
mangle: {
screw_ie8: true // eslint-disable-line camelcase
}
})
);
}
config.target = 'electron-renderer';
//=====================================
// TEST
//-------------------------------------
if (ENV_TEST) {
config.devtool = 'inline-source-map';
config.module.rules.push(rules.sharedStyles);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.