tablas manejo llamar leer externo ejemplos desde contenido archivos archivo javascript node.js webpack

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" // } };



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 .

Enlace de documentación


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`

ver doc: entrada de detección automática de 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" },