Skip to content

Instantly share code, notes, and snippets.

@katiasmet
Created Jul 5, 2017
Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, world</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<header>
<h1>Hello, world</h1>
</header>
<svg>
<use xlink:href="#twitter"></use>
</svg>
</body>
</html>
{
"name": "launchpad",
"version": "0.1.0",
"scripts": {
"development": "npm run clean && NODE_ENV=development webpack-dev-server --open",
"serve": "ws -d ./dist -c -p 3000 ",
"clean": "rimraf ./dist",
"production": "npm run clean && NODE_ENV=production webpack -p"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^7.0.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.2.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.1",
"eslint": "^3.17.0",
"eslint-config-devine": "^1.7.0",
"eslint-loader": "^1.6.1",
"extract-text-webpack-plugin": "^2.0.0",
"favicons": "^4.8.6",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.1",
"html-loader": "^0.4.4",
"image-webpack-loader": "^3.1.0",
"local-web-server": "^1.2.6",
"lodash": "^4.17.4",
"node-sass": "^3.3.3",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^1.2.1",
"postcss-reporter": "^3.0.0",
"postcss-will-change": "^1.1.0",
"rimraf": "^2.5.4",
"sass-loader": "^2.0.1",
"style-loader": "^0.17.0",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",
"svg-sprite-loader": "^3.0.5",
"svgo-loader": "^1.2.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.0",
"webpack-config-htmls": "^1.0.1",
"webpack-config-utils": "^2.3.0",
"webpack-dev-server": "^2.4.1"
}
}
import twitterIcon from '../_assets/svg/twitter.svg';
const init = () => {
console.log(`Hello, world`);
};
init();
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
const path = require(`path`);
const webpack = require(`webpack`);
const {HotModuleReplacementPlugin} = webpack;
const {UglifyJsPlugin} = webpack.optimize;
const configSettings = require(`./_config`);
const CopyWebpackPlugin = require(`copy-webpack-plugin`);
const ExtractTextWebpackPlugin = require(`extract-text-webpack-plugin`);
const configHtmls = require(`webpack-config-htmls`)();
const {getIfUtils, removeEmpty} = require(`webpack-config-utils`);
const {ifProduction, ifDevelopment} = getIfUtils(process.env.NODE_ENV);
const extractCSS = new ExtractTextWebpackPlugin(`css/style.css`);
const extractHTML = new ExtractTextWebpackPlugin(`[name].html`);
/* compile favicons */
const FaviconsWebpackPlugin = require(`favicons-webpack-plugin`);
// change for production build on different server path
const publicPath = `/`;
const port = 3000;
const copy = new CopyWebpackPlugin([{
from: configSettings.assets.input,
to: configSettings.assets.output,
}], {
ignore: [
`.DS_Store`,
],
});
const config = {
entry: removeEmpty([
configSettings.css.input,
configSettings.js.input,
ifDevelopment(...configHtmls.entry),
]),
resolve: {
extensions: [
`.js`,
`.jsx`,
`.css`,
`.scss`,
],
},
output: {
path: path.join(__dirname, configSettings.general.output),
filename: `js/[name].[hash].js`,
publicPath,
},
devtool: `source-map`,
devServer: {
contentBase: configSettings.general.input,
hot: true,
overlay: {
errors: true,
warnings: true,
},
port,
},
module: {
rules: removeEmpty([
ifDevelopment({
test: /\.scss$/,
use: [
`style-loader`,
{
loader: `css-loader`,
options: {
importLoaders: 1,
},
},
{
loader: `postcss-loader`,
},
{
loader: `sass-loader`,
},
],
}),
ifProduction({
test: /\.scss$/,
loader: extractCSS.extract([
{
loader: `css-loader`,
options: {
importLoaders: 1,
},
},
{
loader: `postcss-loader`,
},
{
loader: `sass-loader`,
},
]),
}),
{
test: /\.html$/,
loader: `html-loader`,
options: {
attrs: [
`audio:src`,
`img:src`,
`video:src`,
`source:srcset`,
], // read src from video, img & audio tag
},
},
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: `babel-loader`,
},
{
loader: `eslint-loader`,
options: {
fix: true,
},
},
],
},
{
test: /\.(svg|png|jpe?g|gif|webp)$/,
loader: `url-loader`,
options: {
limit: 1000, // inline if < 1 kb
context: configSettings.general.input,
name: `[path][name].[ext]`,
},
},
{
test: /\.(mp3|mp4|wav)$/,
loader: `file-loader`,
options: {
context: configSettings.general.input,
name: `[path][name].[ext]`,
},
},
{
test: /\.svg$/,
use: [
`svg-sprite-loader`,
`svgo-loader`,
],
},
ifProduction({
test: /\.(svg|png|jpe?g|gif)$/,
loader: `image-webpack-loader`,
enforce: `pre`,
options: {
bypassOnDebug: true,
},
}),
]),
},
plugins: removeEmpty([
...configHtmls.plugins,
ifDevelopment(new HotModuleReplacementPlugin()),
ifProduction(copy),
ifProduction(extractCSS),
ifProduction(new FaviconsWebpackPlugin({
logo: configSettings.general.faviconLocation,
prefix: `assets/favicon/`,
emitStats: false,
statsFilename: `info.json`,
persistentCache: true,
background: configSettings.general.faviconBackground,
title: configSettings.general.title,
appDescription: configSettings.general.description,
display: configSettings.general.display,
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false,
},
})),
ifProduction(
new UglifyJsPlugin({
sourceMap: true,
comments: false,
})
),
]),
};
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment