×
Inicio Aleatorio

primeros pasos con webpack

Sección: Programación

Creado: 18-09-22 (Actualizado: 21-02-23)

Inicializamos

First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli (the tool used to run webpack on the command line):

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

Configuramos

package.json

- "main": "index.js",
+ "private": true,
"scripts": {
  "build": "webpack"
},

webpack.config.js

const path = require('path');

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

Creamos src/index.js y dist/index.html

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
   </head>
   <body>

     <script src="main.js"></script>
   </body>
 </html>

compilamos

npm run build
[npx webpack]

Assets

Loading CSS

In order to import a CSS file from within a JavaScript module, you need to install and add the style-loader and css-loader to your module configuration:

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

webpack.config.js

 const path = require('path');

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

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
 };

This enables you to import './style.css' into the file that depends on that styling. Now, when that module is run, a style tag with the stringified css will be inserted into the head of your html file.

npm run build

To see what webpack did, inspect the page (don't view the page source, as it won't show you the result, because the style tag is dynamically created by JavaScript) and look at the page's head tags. It should contain the style block that we imported in index.js.

Note that you can, and in most cases should, minimize css for better load times in production. On top of that, loaders exist for pretty much any flavor of CSS you can think of – postcss, sass, and less to name a few.

sass

npm install sass-loader sass webpack --save-dev

Chain the sass-loader with the css-loader and the style-loader to immediately apply all styles to the DOM or the mini-css-extract-plugin to extract it into a separate file.

Then add the loader to your Webpack configuration. For example: src\index.js

import "./style.scss";

src\style.scss

$body-color: red;

body {
  color: $body-color;
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Finally run webpack via your preferred method.

npm run build

bootstrap

install

npm install bootstrap
npm install --save jquery popper.js

importing javascript

src/index.js

import 'bootstrap';
or
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';

importing styles

Siguiente Publicación

Anterior Aleatorio Siguiente
Volver al Catálogo