Webpack para Vue 💚

44802

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:

Dependencias de base
Dependencias de babel
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 queesté en 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');

hace 4 años

Escribe tu comentario

+ 2

nelwey

6206Puntos

3 años

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

roremdev

44802Puntos

3 años

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.