7

Webpack para Vue 馃挌

Atendiendo a los temas vistos durante todo el curso de Webpack y que la pr谩ctica es con React 馃挋. Les comparto la forma de integrar Vue con Webpack.
Cabe mencionar que la forma tradicional de integrar Webpack es meramente opcional, ya que en la pr谩ctica, es preferible el Vue-CLI.

Instalaci贸n del proyecto

Para este paso, no es diferente a lo que ven铆amos trabajando y lo separar茅 de la siguiente forma:

  1. Dependencias de base
  2. Dependencias de babel
  3. Dependencias adicionales

Cabe mencionar que la inicializaci贸n del proyecto se da por hecho con npm init -y donde damos los valores por default.

Dependencias de base

Como trabajaremos con Vue, instalaremos de primera esa dependencia como core.

npm i vue

Posteriormente, instalamos Webpack donde nos anticipamos a la instalaci贸n del server para el hot-reload.

npm i -D webpack webpack-cli webpack-dev-server

Quedando tu archivo package.json de la siguiente forma:

{
    "devDependencies": {
        "webpack": "^5.28.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "vue": "^2.6.12"
    },
}

Nota. Al observar nuestro archivo de configuraci贸n de Node, dej贸 ^ para decir la versi贸n compatible del proyecto o con la que est谩 desarrollada al momento.

Dependencias de babel

Tradicionalmente escribimos el archivo Webpack en formato commonJS por lo que ocupamos las dependencias con const ... require por lo que te comparto las dependencias de Babel para transpilar el c贸digo de Webpack en ES6.

npm i -D
	@babel/cli # habilita el uso para compilar archivos desde laCLI
	@babel/core # habila babel para transpilar c贸digo
	@babel/preset-env # permite el usar las 煤ltimas versiones de JavaScript
	@babel/plugin-transform-runtime # permite el re-usar el c贸digo generado para minimizar el tama帽o final de los archivos
	@babel/register # permite la traducci贸nde ES6 sin queesten un m贸dulo
	babel-loader # transpila c贸digo JavaScript usando Babel y Webpack

Quedando tu archivo package.json de la siguiente forma:

{
    "devDependencies": {
        "@babel/cli": "^7.13.14",
        "@babel/core": "^7.13.14",
        "@babel/plugin-transform-runtime": "^7.13.10",
        "@babel/preset-env": "^7.13.12",
        "@babel/register": "^7.13.14",
        "babel-loader": "^8.2.2",
        "webpack": "^5.28.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "vue": "^2.6.12"
    },
    "babel": {
        "presets": [
            "@babel/preset-env"
        ],
        "plugins": [
            "@babel/plugin-transform-runtime"
        ]
    }
}

Para configurar Babel, puedes seleccionar un archivo como .babelrc. En mi caso, lo agrego dentro del archivo package.json

Dependencias adicionales

A diferencia de React, que utiliza @babel/preset-react Vue utiliza loaders para trabajar con Webpack. Por lo que la instalaci贸n quedar谩 de la siguiente manera:

  • Para Vue y Pug
npm i -D vue-loader vue-template-compiler pug-plain-loader

  • Para las dem谩s que se utilizan recurrentemente para estilos (SASS por ejemplo), etc:
npm i -D 
	html-webpack-plugin # dependencies html
	mini-css-extract-plugin css-loader # dependencias para css
	style-loader sass sass-loader # dependencias para sass
	css-minimizer-webpack-plugin terser-webpack-plugin clean-webpack-plugin # para optimization en producti贸n

Al final quedando el archivo package.json de la siguiente forma:

{
    "devDependencies": {
        "@babel/cli": "^7.13.14",
        "@babel/core": "^7.13.14",
        "@babel/plugin-transform-runtime": "^7.13.10",
        "@babel/preset-env": "^7.13.12",
        "@babel/register": "^7.13.14",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^5.2.0",
        "css-minimizer-webpack-plugin": "^1.3.0",
        "html-webpack-plugin": "^5.3.1",
        "mini-css-extract-plugin": "^1.4.0",
        "pug-plain-loader": "^1.1.0",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "style-loader": "^3.0.0",
        "terser-webpack-plugin": "^5.1.1",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.28.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "vue": "^2.6.12"
    },
    "babel": {
        "presets": [
            "@babel/preset-env"
        ],
        "plugins": [
            "@babel/plugin-transform-runtime"
        ]
    }
}

Archivo de configuraci贸n

Ya para terminar, les comparto los archivo de configuraci贸n de Webpack que deber谩 ser nombrado de la siguiente forma para que Babel entienda que deber谩 transpilarlo webpack.config.babel.js:

import { resolve, join } from'path';import { VueLoaderPlugin } from'vue-loader';import HtmlWebpackPlugin from'html-webpack-plugin';import MiniCssExtractPlugin from'mini-css-extract-plugin';import { CleanWebpackPlugin } from'clean-webpack-plugin';

exportdefault () => {
    return {
        mode: 'development',
        entry: './src/index.js',
        output: {
            path: resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        resolve: {
            extensions: ['.js', '.vue']
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.(js|jsx)?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.(html)?$/,
                    loader: 'html-loader'
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource'
                },
                {
                    test: /\.pug$/,
                    loader: 'pug-plain-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: resolve(__dirname, './public/index.html')
            }),
            new MiniCssExtractPlugin({
                filename: '[name].css'
            }),
            new CleanWebpackPlugin(),
            new VueLoaderPlugin()
        ],
        devServer: {
            contentBase: join(__dirname, 'dist'),
            compress: true,
            port: 3000
        }
    };
};

Para ejecutar el archivo, se necesitar谩 de una estructura siguiente:

  • public / index.html

<htmllang="en">
  <head>
    <metacharset="UTF-8" />
    <metahttp-equiv="X-UA-Compatible"content="IE=edge" />
    <metaname="viewport"content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <divid="app">div>
  body>
html>

  • src / App.vue
<templatelang="pug">
div
    h1 Hello Vue!! 馃挌
template>

<script>
exportdefault {
    name: 'App',
    },
};
script>

<stylelang="scss">
$base-color: #c6538c;
$color: rgba(black, 0.88);

body {
    background-color: $base-color;color: $color;
}
style>

  • src / index.js
import Vue from'vue';
import App from'./App.vue';

new Vue({
    render: (h) => h(App),
}).$mount('#app');

Escribe tu comentario
+ 2
3
5986Puntos

Por qu茅 es preferible hacerlo con el vue-cli?

3
33080Puntos
un a帽o

Te explico 鈥 馃槉

Vue-CLI es una herramienta que trae integrada un conjunto de paqueter铆as revisadas. Al decir CLI, nos referimos que la herramienta tendr谩 una personalizaci贸n guiada mediante terminal, y por tanto personalizar tu configuraci贸n principal y post-creaci贸n, en el caso de Vue.

Cabe mencionar que se est谩 tendiendo a utilizar la herramienta ViteJS para el desarrollo de aplicaciones Vue con dependencias m谩s nativas con tendencia PWA.

2
40664Puntos

Muy buen aporte compa帽ero!

2
33080Puntos
4 meses

Gracias por leerlo, saludos 馃憢