├── .gitignore ├── src ├── image.jpg ├── app.js ├── app.scss └── index.html ├── index.html ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /src/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derweili/Webpack-Starter/master/src/image.jpg -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | const css = require('./app.scss'); 2 | console.log('testing!'); 3 | // alert('testing'); 4 | -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: pink; 3 | // background-image: url('./image.jpg'); 4 | background-position: center center; 5 | p{ 6 | color: green; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Getting Started 4 | 5 | 6 |

Content goes here

7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= htmlWebpackPlugin.options.title %> 4 | 5 | 6 |

Content goes here!

7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Webpack Starter Werbeagenten", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server", 8 | "prod": "webpack -p" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "css-loader": "^0.28.8", 15 | "extract-text-webpack-plugin": "^3.0.2", 16 | "file-loader": "^1.1.6", 17 | "html-webpack-plugin": "^2.30.1", 18 | "node-sass": "^4.7.2", 19 | "sass-loader": "^6.0.6", 20 | "style-loader": "^0.19.1", 21 | "webpack": "^3.10.0", 22 | "webpack-dev-server": "^2.10.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | 5 | module.exports = { 6 | entry: './src/app.js', 7 | output: { 8 | filename: 'app.bundle.js', 9 | path: path.resolve(__dirname, 'dist') 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.scss$/, 15 | use: ExtractTextPlugin.extract({ 16 | fallback: 'style-loader', 17 | use: [ 18 | { loader: "css-loader" }, 19 | { loader: "sass-loader" } 20 | ] 21 | }) 22 | }, 23 | { 24 | test: /\.jpg$/, 25 | loader: 'file-loader', 26 | options: { 27 | name: '[name].[ext]' 28 | } 29 | } 30 | ] 31 | }, 32 | devServer: { 33 | contentBase: path.join(__dirname, 'dist'), 34 | compress: true, 35 | stats: "errors-only", 36 | open: true 37 | }, 38 | plugins: [ 39 | new HtmlWebpackPlugin({ 40 | title: 'Custom template', 41 | template: './src/index.html', 42 | minify: { 43 | collapseWhitespace: true 44 | }, hash: true 45 | }), 46 | new ExtractTextPlugin({ 47 | filename: "app.css", 48 | allChunks: true 49 | }) 50 | ] 51 | }; 52 | --------------------------------------------------------------------------------