Programación webpack

3

HtmlWebpackPlugin inyecta archivos de ruta relativa que se rompen al cargar rutas de sitios web no raíz

Estoy usando webpack y HtmlWebpackPlugin para inyectar js y css incluidos en un archivo de plantilla html. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), Y produce el siguiente archivo html. <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> Esto …

115 javascript express webpack react-router

6

Webpack 4 - ¿Cómo configurar minimizar?

Webpack 4 viene con la siguiente declaración: webpack.optimize.UglifyJsPlugin se ha eliminado, utilice config.optimization.minimize en su lugar. Es bastante justo, pero no puedo encontrar ninguna información sobre cómo configurar la instancia de UglifyJsPlugin que se ejecuta bajo el capó, por ejemplo, para cambiar el directorio de caché. Se puede hacer esto?

114 javascript webpack webpack-4

20

React-Native: Module AppRegistry no es un módulo invocable registrado

Actualmente estoy tratando de ejecutar el servidor ES6 react-native-webpack-server en un emulador de Android. La diferencia es que he actualizado mi package.jsony build.gradepara usar react 0.18.0, y recibo este error al arrancar. Hasta donde yo sé, AppRegistryse importa correctamente. Incluso si tuviera que comentar el código, este error sigue apareciendo. …

114 android react-native webpack

5

¿Cómo obtener acceso a webpack-dev-server desde dispositivos en la red local?

Hay alguna configuración del servidor de desarrollo webpack (es parte de toda la configuración): config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) …

112 javascript node.js networking webpack web-development-server

7

Exponer jQuery a un objeto de ventana real con Webpack

Quiero exponer el objeto jQuery al objeto de ventana global al que se puede acceder dentro de la consola del desarrollador en el navegador. Ahora en mi configuración de paquete web tengo las siguientes líneas: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] Estas líneas agregan las definiciones …

111 javascript jquery webpack

4

Notación de corchetes de objetos de JavaScript ({Navigation} =) en el lado izquierdo de asignar

No he visto esta sintaxis antes y me pregunto de qué se trata. var { Navigation } = require('react-router'); Los corchetes de la izquierda arrojan un error de sintaxis: símbolo inesperado { No estoy seguro de qué parte de la configuración del paquete web se está transformando o cuál es …

108 javascript webpack ecmascript-6

19

Se negó a cargar la fuente 'data: font / woff ...' viola la siguiente directiva de Política de Seguridad de Contenido: “default-src 'self'”. Tenga en cuenta que 'font-src'

Mi reaccionar webApp da este error en la consola del navegador Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. También: Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it …

108 javascript reactjs webpack

2

Opción de preprocesador Vue CLI CSS: dart-sass VS node-sass?

Al crear un nuevo proyecto con CLI (v3.7.0), hay una opción para elegir entre dart-sasso node-sasscompilador. ¿Cómo se comparan estos entre sí, para ser más específicos de lo declarado en los documentos de Vue ? Un consejo sobre el rendimiento sass Tenga en cuenta que al utilizar Dart Sass, la …

108 vue.js webpack sass vue-cli node-sass

6

webpack no puede encontrar el módulo si el archivo se llama jsx

Mientras escribo webpack.config.js así module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; Y en index.jsximporto un reactmóduloApp import React from 'react'; import { render } from 'react-dom'; import App …

107 reactjs webpack webpack-dev-server

7

"Es posible que necesite un cargador adecuado para manejar este tipo de archivo" con Webpack y Babel

Estoy intentando usar Webpack con Babel para compilar activos de ES6, pero recibo el siguiente mensaje de error: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' Así es como se ve mi configuración …

106 javascript webpack babeljs es6-module-loader

2

¿Qué hace este comando "react-scripts eject"?

¿Qué hace el npm run ejectcomando? Entiendo lo que hacen otros comandos como iniciar, construir, probar. Pero ni idea de cómo expulsarlo.

106 reactjs webpack create-react-app react-scripts

4

Cargadores de paquetes web vs complementos; ¿cual es la diferencia?

¿Cuál es la diferencia entre cargadores y complementos en webpack? La documentación de los complementos solo dice: Use complementos para agregar funcionalidades típicamente relacionadas con los paquetes en el paquete web. Sé que babel usa un cargador para las transformaciones jsx / es2015, pero parece que otras tareas comunes (copy-webpack-plugin, …

103 javascript reactjs webpack

5

Decoradores webpack babel 6 ES6

Tengo un proyecto escrito en ES6 con webpack como paquete. La mayor parte de la transpilación funciona bien, pero cuando intento incluir decoradores en cualquier lugar, aparece este error: Decorators are not supported yet in 6.x pending proposal update. Revisé el rastreador de problemas de babel y no pude encontrar …

101 javascript webpack ecmascript-6 babeljs decorator

4

Cómo almacenar el archivo de configuración y leerlo usando React

Soy nuevo en react.js He implementado un componente en el que estoy obteniendo los datos del servidor y los uso como, CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the …

101 javascript reactjs configuration webpack flux

5

Importe imágenes dinámicamente desde un directorio usando webpack

Así que aquí está mi flujo de trabajo actual para importar imágenes e íconos en el paquete web a través de ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Esto se complica rápidamente. Esto es lo que quiero: …

100 reactjs webpack ecmascript-6

Preguntas etiquetadas con webpack