-
Notifications
You must be signed in to change notification settings - Fork 0
/
Webpack_Instructions.txt
108 lines (89 loc) · 3.01 KB
/
Webpack_Instructions.txt
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// https://webpack.js.org/
// https://dev.to/robotspacefish/how-i-set-up-webpack-and-babel-with-vanilla-js-2k5e
// Create the new directory and change to the new directory
cd webpack1
// Create /dist and /src folders within this directory
// Create index.html in /dist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Starter Webpack App" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<title>Starter Webpack App</title>
</head>
<body>
<h1>Welcome to Webpack!</h1>
<script src="bundle.js"></script>
</body>
</html>
// Create index.js in /src
import { helloWorld } from './hello-world.js';
helloWorld();
//Create hello-world.js in /src
export function helloWorld() {
console.log('Hello World!');
}
// Create a package.json file in your project directory
npm init --yes
// Install Webpack to your dev dependencies
npm install webpack webpack-cli webpack-dev-server --save-dev
// Open package.json and add the following to prevent accidentally publishing your code
"private": true,
// Create a file webpack.config.js in your root project-folder with the following contents:
const path = require('path');
module.exports = {
"mode": "none",
"entry": "./src/index.js",
"output": {
"path": __dirname + '/dist',
"filename": "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, 'dist')
}
};
// Add the Webpack development server and Webpack to package.json in the script section:
"scripts": {
+ "build": "webpack",
+ "dev-server": "webpack serve r",
"test": "echo \"Error: no test specified\" && exit 1"
},
// Start the Webpack development server
npm run dev-server
// Once the Webpack development server is up and running,
// visit the localhost in a browser (ex. http://localhost:8080/)
// and you should see your JavaScript test alert. By using the
// dev-server you can make changes, save, and it will re-bundle
// automatically. You won’t have to worry about manually building
// and opening your index.html in the browser each time you make a change.
// Bundle the code for distribution
npm run build
// Adding Style Loaders
// If you want to be able to import css files you will need to
// add the appropriate loaders to your webpack.config.js
// css-loader is used to interpret and resolve imports and
// style-loader is used to inject your css into the DOM.
// Install the 2 loaders to your dev dependencies
npm install --save-dev css-loader style-loader
// add the module rules to use the loaders to your webpack.config file.
"module": {
"rules": [
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
},
]
}
// Create a folder called ‘styles’ in the 'src' folder
// and add a css file called 'main.css' in the 'styles' folder.
// Add some test code to the css file:
body {
background: green;
}
// Connect your styles to your index.js file:
import './styles/main.css';