Clever Geek Handbook

Conceptos básicos de configuración del paquete web

Primero, instalaremos webpack, esto se hace usando los comandos:



yarn add webpack webpack-cli -Dsi está usando el administrador de paquetes yarn

npm i webpack webpack-cli --save-dev, para el administrador de paquetes



npm , Webpack se configura usando el archivo de configuración webpack.config.jsque está almacenado en el directorio raíz del proyecto.



Un ejemplo de un archivo de configuración: 



const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};


La configuración inicial es la siguiente:



  • watch : hace que el paquete web observe cambios en los archivos y los reconstruya;
  • entrada : indica el punto de entrada al proyecto y dónde empezar a construir el gráfico de las dependencias internas del proyecto;
  • salida : especifica la ruta donde se ubicará el archivo creado y cómo se nombrará;


También necesita instalar webpack-dev-server, que necesita para desarrollar y depurar la aplicación.



yarn add webpack-dev-serverpara el hilo del administrador de paquetes o

npm i webpack-dev-serversi usa npm



Para configurar webpack-dev-server agregue devServer en nuestro archivo de configuración.



Parámetros para webpack-dev-server: 



module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};


También necesitamos agregar / reemplazar el script de inicio del proyecto en nuestro archivo package.json: 



"start": "webpack-dev-server --mode development",


y un script para construir la compilación: 



"build": "webpack --mode production"


Cargadores de arranque



Los cargadores son módulos especiales que se utilizan para "cargar" otros módulos. También le permiten preprocesar archivos a medida que se importan o "cargan".



Los cargadores pueden convertir archivos como TypeScript a JavaScript, sass a css. Incluso pueden permitirnos hacer cosas como importar archivos CSS y HTML directamente en nuestros módulos JavaScript. Para usarlos, debe registrar los cargadores necesarios en la sección module.rules del archivo de configuración.



Ejemplos de cargadores:



  • babel-loader : utiliza babel para cargar archivos ES2015.
  • cargador de archivos : para cargar varios archivos (imágenes, pistas de música, etc.) en el directorio de salida
  • style-loader : se utiliza para cargar estilos
  • css-loader : permite cargar archivos de estilo
  • @ svgr / webpack : un cargador que le permite usar imágenes svg como elementos jsx


Para usar babel-loader necesitas instalarBabel/ core . También instale el presetBabel/ preset-env , que compila ES2015 + a ES5 detectando automáticamente los complementos y archivos poligráficos necesarios que necesita Babel. A continuación, cree un archivo .babelrc y agregue el ajuste preestablecido previamente instalado. 



{
 "presets": [
   "@babel/preset-env"
 ]
}


Ahora agreguemos un cargador a nuestra configuración para convertir archivos Javascript. Esto nos permitirá usar la sintaxis ES2015 + en nuestro código (que se convertirá automáticamente a ES5 en la compilación final). 



{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},


Configuración de ejemplo con cargador de archivos 



{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},


Configuración de ejemplo para el cargador @ svgr / webpack 



{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}


Complementos



Los complementos son la columna vertebral del paquete web, ya que esencialmente todo su trabajo se basa en el sistema de complementos. Amplían enormemente las capacidades de los cargadores de arranque.



Los cargadores realizan el preprocesamiento de archivos de cualquier formato. Funcionan a nivel de archivos individuales durante o antes de la creación del paquete. Una vez finalizados los cargadores, los complementos giran. Los complementos generalmente solo realizan una función.



Para usarlos, debe agregar los complementos necesarios en la sección de complementos del archivo de configuración.



Ejemplos de complementos:



  • html-webpack-plugin : se utiliza para crear archivos html
  • copy-webpack-plugin : copia archivos individuales o directorios completos que ya existen en el directorio de compilación.
  • definePlugin : le permite crear constantes globales
  • HotModuleReplacementPlugin : activa el modo HMR, actualiza solo la parte que ha cambiado, sin recargar completamente la aplicación.


Configuración de ejemplo con complementos agregados: 



plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],


También agregaremos el complemento UglifyjsWebpackPlugin, el cual minifica el código js, ​​para esto necesitas instalar uglifyjs-webpack-plugin y agregarlo en la sección de optimización 



optimization: {
   minimizer: [new UglifyJsPlugin()]
},


More articles:


All Articles