Inicializamos un protecto
1
2
3
| $ mkdir webpack-template
$ cd webpack-template
$ npm init -y
|
Instalamos dependencias
Las dependencias que utilizaremos son
- babel-core 6.26.3
- babel-loader 7.1.5
- babel-preset-es2015 6.24.1
- css-loader 1.0.0”,
- mini-css-extract-plugin 0.4.1
- node-sass 4.9.2
- path 0.12.7
- sass-loader 7.1.0
- style-loader 0.21.0
- webpack 4.16.4
- webpack-cli 3.1.0
Creamos el archivo de configuracion
La configuración esta definida en el archivo webpack.config.js
Configuracion básica
La configuración basica solo agrega configuracion para generar un bundle para Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/js/index.js'),
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test:/\.js$/,
}
]
}
};
|
Agregamos babel
Para poder escribir ES7 y todos los navegadores puedan leer el Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| ...
module.exports = {
module: {
rules: [
{
test:/\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
]
},
};
|
Agregamos SASS como preprocesador de estilos
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
|
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
|
Agregamos la tarea al archivo package.json
1
2
3
4
5
| ...
"scripts": {
"build": "webpack --mode=development",
},
...
|
Ahora la estructura de archivos
1
2
3
4
5
6
7
8
9
10
| ├── package.json
├── src
│ ├── html
│ │ └── index.html
│ ├── js
│ │ ├── app.js
│ │ └── index.js
│ └── sass
│ └── styles.scss
└── webpack.config.js
|
index.html
1
2
3
4
5
6
7
8
9
10
| <!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="../../dist/app.js"></script>
</body>
</html>
|
app.js
1
2
3
4
5
6
7
8
| class App {
constructor(){
const element = document.createElement('h1');
element.innerHTML='Wellcome to WebPack';
document.body.appendChild(element);
}
}
export default App;
|
index.js
1
2
3
| import '../sass/styles.scss'
import App from './app.js'
const a= new App()
|
styles.scss
1
2
3
4
5
6
7
8
9
10
| $font-color: #121212;
$font-inverse-color: #F2F2F2;
$color-background-color: #0BC8FF;
body{
background-color: $color-background-color;
}
h1{
text-align: center;
color: $font-inverse-color;
}
|