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 la CLI
@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ón de ES6 sin que esté 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');
Curso de Webpack
