diff --git a/.babelrc b/.babelrc index c13c5f6..db848ed 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,7 @@ { - "presets": ["es2015"] + "presets": ["es2015"], + "plugins": [ + "syntax-object-rest-spread", + "transform-object-rest-spread" + ] } diff --git a/README.md b/README.md new file mode 100644 index 0000000..560f6ed --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# Hugo + Webpack Boilerplate + +This is a boilerplate for using Hugo as a static site generator and Weback as the +asset pipeline. + +It's setup to use post-css and babel for CSS and JavaScript. + +## Usage + +Clone this repository and run: + +```bash +npm install +npm start +``` + +Then visit http://localhost:3009/ + +To build your static output, use: + +```bash +npm run build +``` + +## Deploying to netlify + +Push your clone to your own GitHub repo, then start a new netlify project, pick +your repository and configure it like this: + +* **Build Command:** npm run build +* **Directory:** dist + +Now netlify will build and deploy your site whenever you push to git. diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 5de71c9..bb0e8b5 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -42,11 +42,18 @@ gulp.task('server', ['build'], (cb) => { // Start a webpack-dev-server new WebpackDevServer(webpack(myConfig), { contentBase: './dist', - publicPath: 'http://localhost:3009/', + publicPath: '/', stats: { colors: true }, - hot: false + hot: false, + proxy: { + "/confirm/*": { + bypass: function(req, res, proxyOptions) { + return "/pages/confirm/index.html"; + } + } + } }).listen(3009, 'localhost', function(err) { if(err) throw new gutil.PluginError('webpack-dev-server', err); gutil.log('[webpack-dev-server]', 'http://localhost:3009/'); diff --git a/package.json b/package.json index 29ddccd..f8a2b37 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,12 @@ "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-preset-es2015": "^6.9.0", "css-loader": "^0.23.1", + "exports-loader": "^0.6.3", + "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", + "imports-loader": "^0.6.5", "postcss-cssnext": "^2.7.0", "postcss-loader": "^0.9.1", "style-loader": "^0.13.1", diff --git a/webpack.conf.js b/webpack.conf.js index a0e014b..399c2d3 100644 --- a/webpack.conf.js +++ b/webpack.conf.js @@ -1,5 +1,6 @@ import webpack from 'webpack'; import path from 'path'; +import ExtractTextPlugin from "extract-text-webpack-plugin"; export default { module: { @@ -11,17 +12,13 @@ export default { { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, - loader: 'style!css?modules!postcss' + loader: ExtractTextPlugin.extract("style", "css?importLoaders=1!postcss") }, { loader: 'babel', test: /\.js?$/, exclude: /node_modules/, - query: { - cacheDirectory: true, - presets: ['react', 'es2015'], - plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread'] - } + query: {cacheDirectory: true} } ] }, @@ -33,7 +30,8 @@ export default { plugins: [ new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' - }) + }), + new ExtractTextPlugin("main.css") ], context: path.join(__dirname, 'src'),