The 4ga-templatewebpack's intro from aredondovilla

Inicializamos un proyecto.
```
npm init -y
```

Instalamos las dependencias.

npm install --save-dev webpack webpack-cli
npm i -D webpack webpack-cli

Añadimos nuestro fichero de configuración webpack.config.js.

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  }
};

Creamos nuestro fichero de entrada main.js dentro del directorio src

window.load = function() {
    console.log('Hello world')
}

Añadimos el comando build a nuestro proyecto en el fichero package.json en la sección scripts.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

Ejecutamos el comando para comprobar que funciona correctamente. Deberia generar el fichero main.bundle.js en el directorio dist
```
npm run build
```

Instalamos dependenciar para incluir ficheros css.

npm install --save-dev style-loader css-loader 
npm i -D style-loader css-loader

Actualizamos la configuración de webpack en el fichero webpack.config.js.

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
      rules: [{
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
    }]
  }
};

Creamos la hoja de estilos style.css en el directorio src
```
body {
    background-color: red;
}
```
Incluimos el fichero style.css en el fichero main.js
```
require('./style.css')
```
Ejecutamos de nuevo el comando para paquetizar nuestro proyecto.
```
npm run build
```

Instalamos nuestro primer plugin para nuestra página de entrada.

npm install --save-dev html-webpack-plugin
npm i -D html-webpack-plugin

Actualizamos la configuración de webpack en el fichero webpack.config.js.

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
      rules: [{
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
    }]
  },
  plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})]
};

Creamos nuestro primer documento index.html en el directorio src.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Webpack</title>
  </head>
  <body>
    <h1>Webpack</h1>
  </body>
</html>

Ejecutamos de nuevo el comando para paquetizar nuestro proyecto.
```
npm run build
```
Arrancamos un servidor para visualizar nuestra página.
```
python -m http.server 3000 --directory ./dist
```

Instalamos un servidor para desarrollo.

npm install --save-dev webpack-dev-server
npm i -D webpack-dev-server

Añadimos el comando develop a nuestro proyecto en el fichero package.json en la sección scripts.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "develop": "webpack-dev-server --mode development --port 3000"
}

Ejecutamos el comando develop.
```
npm run develop
```
Creamos un fichero .gitignore para evitar subir ficheros innecesarios al repositorio.
```
dist
node_modules
```

Subimos los cambios a nuestro repositorio.

git add .
git commit -m "Initial commit"
git push origin master

aredondovilla / 4ga-templatewebpack Goto Github PK

4ga-templatewebpack's Introduction

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent