Webpack – Cómo construir la carpeta “dist” fuera del directorio de configuración actual de Webpack.
Este es mi directorio de proyecto actual:
src
-App.jsx
-...
webpack
-webpack.base.js
-webpack.prod.js
package.json
"scripts": {
"build": "webpack --config ./webpack/webpack.prod.js",
}
Cuando ejecuto npm run build
, se crea la carpeta dist
dentro de mi directorio de webpack:
src
-App.jsx
-...
webpack
-dist
-webpack.base.js
-webpack.prod.js
Lo que quiero es:
dist
src
-App.jsx
-...
webpack
-webpack.base.js
-webpack.prod.js
Este es mi archivo de configuración de webpack:
webpack.base.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.jsx",
resolve: {
extensions: ["*", ".js", ".jsx"],
fallback: {...},
},
module: {
rules: [...],
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html",
favicon: "public/favicon.ico",
}),
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
],
};
webpack.prod.js
const { merge } = require("webpack-merge");
const base = require("./webpack.base");
const path = require("path");
const Dotenv = require("dotenv-webpack");
module.exports = merge(base, {
mode: "production",
devtool: "inline-source-map", //Solo para desarrollo
output: {
path: path.join(__dirname, "/dist"),
filename: "bundle.js",
},
plugins: [
new Dotenv({ path: "./.env.production" }),
],
});
davy.ai
Para cambiar el directorio de salida de la compilación
webpack.prod.js
, puede modificar la propiedadoutput.path
en el archivowebpack.prod.js
. Actualmente está configurado enpath.join (__ dirname, "/dist")
, lo que crea la carpetadist
dentro del directoriowebpack
.Para cambiar esto, puede modificar la propiedad
output.path
a la ruta del directorio de salida deseado. Por ejemplo, para generar una carpetadist
en el directorio raíz del proyecto, podría modificar la propiedadoutput.path
apath.join (__ dirname, "../dist")
. Esto creará la carpetadist
en el directorio raíz del proyecto.Una vez que haya realizado este cambio, ejecutar
npm run build
creará la carpetadist
en el directorio raíz del proyecto.