manejo - tablas en javascript ejemplos
¿Cómo configurar la entrada y salida de múltiples archivos en el proyecto con webpack? (8)
¿Qué
foo.css
si desea obtener archivos de salida como
foo.css
y
bar.js
al mismo tiempo?
Las respuestas anteriores parecen incapaces de manejar esto.
La forma más sensata es utilizar multi-compiler . Un archivo de entrada, un objeto de configuración, un archivo de salida. De esta answer .
¿Cómo configurar múltiples entradas / salidas de archivos en el proyecto con webpack?
Sigo http://webpack.github.io/docs/tutorials/getting-started/ éxito compilar si solo un archivo en una entrada / salida ...
directorio
app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...
¿Cómo salir así?
././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js
webpack.config.js
module.exports = {
entry: {
''AdministratorArticleCreate'':[''./assets/javascripts/Administrator/Article/Create/Base.js'']
},
output: {
path:
}
// if only one file
// entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
// output: {
// // path: __dirname,
// path: "./assets/javascripts/Administrator/Article/Create/",
// filename: "bundle.js"
// }
};
Esta pregunta tiene 2 años, así que creo que es casi seguro que el autor ha superado este problema, pero para cualquiera que haya aterrizado aquí más recientemente tuve una necesidad muy similar y pude escribir mi propio complemento para permitir rutas / nombres de salida dinámicos desde puntos de entrada conocidos y / o desconocidos.
Mi problema y proceso de pensamiento para la solución se pueden encontrar aquí .
Para mi caso de uso, en realidad necesitaba usar diferentes plantillas basadas en el entorno. Para lograr esto, pasé la variable NODE_ENV
module.exports = (env, argv) => {
const ENVIRONMENT = env.NODE_ENV;
let INDEX_HTML = ''index.html'';
if (ENVIRONMENT === ''staging'') {
INDEX_HTML = ''index-stg.html'';
}
Entonces:
if (NODE_ENV === ''staging'') {
INDEX_HTML = ''index-stg.html'';
}
En la salida:
output: {
path: process.cwd() + ''/build'',
filename: `[name].js`,
chunkFilename: `[${HASH_MODE}].[name].js`
},
complementos:
new HtmlWebpackPlugin({
inject: true,
template: `app/${INDEX_HTML}`,
}),
Para muchos puntos de entrada, use matrices como valor de la propiedad de
entry
:
entry: {
app: [''./app/main.js'', ''.lib/index.js''],
vendors: [''react'']
}
app
y los
vendors
son matrices, por lo que puede colocar tantas rutas de archivos como necesite.
Para el caso de salida:
output: {
path: staticPath,
filename: ''[name].js''
}
El
[name]
se toma de
entry
propiedades de
entry
, por lo que si tenemos
app
y
vendors
como propiedades, tenemos 2 archivos de salida:
app.js
y
vendors.js
.
Puede detectar múltiples entradas y generar archivos de salida separados utilizando patrones de sincronización global .
Ponga esto en su
webpack.config.js
(sin el
...
)
const glob = require("glob");
...
module.exports = (env, options) => ({
...
entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
const path = item.split("/");
path.pop();
const name = path.join(''/'');
acc[name] = item;
return acc;
}, {}),
output: {
filename: "[name]/bundle.js",
path: path.resolve(__dirname, "")
},
...
});
Este "debería" darle el resultado deseado.
Si desea enviar a múltiples directorios, puede usar la ruta como el nombre de la entrada. Por ejemplo, si desea esta estructura de directorio:
apps
├── dir1
│ └── js
│ ├── main.js [entry 1]
│ └── bundle.js [output 1]
└── dir2
├── index.js [entry 2]
└── foo.js [output 2]
Luego intente esto en su módulo. Exportaciones:
{
entry: {
''dir1/js/bundle'': path.resolve(__dirname, ''/apps/dir1/js/main.js''),
''dir2/foo'' : path.resolve(__dirname, ''/apps/dir2/index.js'')
},
output: {
path: path.resolve(__dirname, ''/apps''),
filename: ''[name].js''
},
...
}
este plugin webpack web-webpack-plugin puede resolverlo de una manera muestra.
AutoWebPlugin
puede encontrar todas las entradas de página en un directorio, luego configura automáticamente un
WebPlugin
para cada página para generar un archivo html, puede usarlo de la siguiente manera:
configuración del paquete web
module.exports = {
plugins: [
new AutoWebPlugin(
// the directory hold all pages
''./src/'',
{
// the template file path used by all pages
template: ''./src/template.html'',
// javascript main file for current page,if it is null will use index.js in current page directory as main file
entity: null,
// extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
// achieve by CommonsChunkPlugin
commonsChunk: ''common'',
// pre append to all page''s entry
preEntrys:[''./path/to/file1.js''],
// post append to all page''s entry
postEntrys:[''./path/to/file2.js''],
}),
]
};
directorio src
── src
│ ├── home
│ │ └── index.js
│ ├── ie_polyfill.js
│ ├── login
│ │ └── index.js
│ ├── polyfill.js
│ ├── signup
│ │ └── index.js
│ └── template.html
directorio de salida
├── dist
│ ├── common.js
│ ├── home.html
│ ├── home.js
│ ├── ie_polyfill.js
│ ├── login.html
│ ├── login.js
│ ├── polyfill.js
│ ├── signup.html
│ └── signup.js
AutoWebPlugin
encuentra el directorio de
home login signup
todas las páginas en
./src/
, para este
home login signup
tres páginas utilizará
index.js
como archivo principal y generará tres archivos html home.html login.html signup.html`
lo que realmente me resolvió fue esto:
entry: {
app : __dirname + "/app/views/app/app.js",
admin : __dirname + "/app/views/admin/admin.js"
}
output: {
path: __dirname + "/public",
filename: "[name].js"
},