simple webpack project with sass and js

1 Antwort

Webpack Projekt in wenigen einfachen Schritten realisiert. Inklusive SASS, Babel JS Compiler, UglifyJS und einem automatischem WATCH.

Wie auch bei meinem Artikel zuvor mit Bootstrap, Sass und Grunt empfehle ich die Seite von oben nach unten durchzugehen. Nach 15 Minuten hat man ein lauffähiges Projekt.

Wir legen als erstes ein Root Verzeichnis zb. „projects/“ an. Darin erstellen wir jetzt unser eigentliches Project „name“. In meinem „dev/“ Verzeichnis an wird entwickelt. Im CSS Verzeichnis liegen später die SASS Files. Die im Produktiv-Betrieb verwendeten Sources werden später mit webpack in das „src/“ Verzeichnis generiert.

Mögliche Beispiel-Struktur:

/projects/
/projects/name/ 
/projects/name/dev/ (Arbeitsverzeichnis)
/projects/name/dev/js/
/projects/name/dev/css/
 
/projects/name/src/ (Ausgabeverzeichnis)
/projects/name/src/js/
/projects/name/src/css/

Installieren

Folgende Anwendungen müssen nacheinander installiert werden. Im root Verzeichnis „projects“ installierten Programme müssen nur einmal installiert werden. Andere je Projekt, da sie sich auch unterscheiden könnten.

Schritte (global – Beispiel „projects“)

  1. NODE installieren (Commandline) 
    node -v
  2. NPM installieren (Commandline) 
    npm install

Wer den Installations-Artikel mit Grunt gelesen hat, kann erkennen, dass wir bis jetzt viele Schritte wiederholen.

Schritte (pro Einzelprojekt – Beispiel „name“)

  1. git installieren (optional)
  2. Erstellen Sie mit dem Befehl npm init eine Datei namens package.json für Ihre Anwendung. 
    npm init

    Es werden ein paar Fragen gestellt, einfach ausfüllen – git Url eintragen, wenn erstellt und mit „yes“ bestätigen. Am besten die package.json im Texteditor offen lassen, dann kann man gleich mitlesen, was als nächstes installiert wird

Test-Files erstellen

Mittels Test-Files überprüfen wir, ob unsere webpack Einstellung gleich greifen werden.

In unserem „dev/“ Verzeichnis legen wir ein SASS File im „css/“ ab und eine JavaScript Datei unter „js/“.

Beispiel Sass: dev/css/demo.scss

1
2
3
4
5

$primaryColor: lime; 
body {
    background: $primaryColor;
}

Beispiel JS: dev/js/demo.js

1
2
3
4

// test
 
let test = "Hallo";alert("Servus und "+ test +" Du!");

Ich verwende hier mit Absicht das JS-Neue „let“ und nicht „var“, damit ich das babel testen können. Mit diesem Plugin können wir im neuen ECMAScript schreiben. Umgewandelt wird das JS anschließend für ältere Browser.

In unserem Projekt Verzeichnis (/projects/name/) legen wir eine index.html ab und verknüpfen auf die später generierte StyleSheet und JavaScript Datei.

1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="src/css/demo.css">    <script src="src/js/demo.js"></script></head>
<body>
    <h1>DEMO</h1>
</body>
</html>

webpack installieren

  1. Nun installieren wir webpack (Commandline) 
    npm install --save webpack

webpack Config erstellen

In unserem Projekt Verzeichnis (/projects/name/) erstellen wir erstmal eine leere /webpack.config.js Datei.

Am besten folgenden Code kopieren und in die leere Datei einfügen. Namen und Verzeichnisse ggf. anpassen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
	entry: ['./dev/js/demo.js', './dev/css/demo.scss'],
	output: {
		filename: 'src/js/bundle.js'
	},
	module: {
		rules: [
			{
				test: /.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			},
			{
				test:/\.scss$/,
				use: ExtractTextPlugin.extract({
					use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader'}]
				})
            }
		]
	},
	plugins: [
			new ExtractTextPlugin({
				// define where to save the file
				filename: 'src/css/demo.css'
			}),
			new UglifyJsPlugin({
			    test: /\.js($|\?)/i
  			})
	],
  	watch: true
};
  1. Anschließend: (Commandline) 
    npx webpack --config webpack.config.js

Plugins installieren

  1. babel: (Commandline) 
    npm install --save-dev babel-loader babel-core babel-preset-env
  2. Die SASS Plugins: (Commandline) 
    npm install --save-dev sass-loader node-sass style-loader css-loader extract-text-webpack-plugin
  3. uglifyjs (comprimiert das js): (Commandline) 
    npm install --save-dev uglifyjs-webpack-plugin

Ausführen

  1. webpack Service starten (Commandline) 
    webpack
  2. in der Windows Console beenden (Tastatur)
    STRG + c

Das wars auch schon!

Ich empfehle kleine Änderungen an dem SASS und JS File vorzunehmen. Hier ist kein „–watch“ Befehl nötig.
In der Config Datei haben wir den watch-Befehl schon ausgeführt: „watch: true“. Bitte auch mal im Javascript bewusst einen Fehler erzeugen. Unter Windows verwende ich die PowerShell. Webpack gibt die Fehler detailliert aus und die PowerShell zudem farbig.

Viel Spaß beim Arbeiten …

Ein Gedanke zu „simple webpack project with sass and js“

  1. admin Artikelautor

    Javascript Files zu einer Datei zu verbinden geht ganz leicht ohne Plugin.
    Bei der „entry“ Stelle, noch die zweite Datei mit einfügen:

    entry: ['./dev/js/first.js', './dev/js/second.js', './dev/css/demo.scss'],
    Antworten ↓

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

CAPTCHA

*