webpack-dev-server

Enable gzip compression on webpack-dev-server?

心已入冬 提交于 2019-12-06 05:54:39
问题 How do you enable gzip compression on the webpack-dev-server? It doesn't appear to be on by default. 回答1: 1) Insert this line before app.use(require('webpack-dev-middleware')... : app.use(express.compress()); 2) According to source code there is undocumented option compress : $ webpack-dev-server ... --compress 回答2: If you can find app.use(devMiddleware) in your project, replace it with: var compression = require('compression'); app.use(compression({})); app.use(devMiddleware); And npm

How do you configure a Webpack dev server to serve a specific folder while running the rest of the site through a different server?

☆樱花仙子☆ 提交于 2019-12-06 05:48:48
问题 Some quick background: My company's site runs off a CMS with the CMS handling all routing. There are no html files, only razor files (.cshtml). While redoing the site from scratch is what I'd prefer to do, it's not an option, so I'm attempting to modernize the site slowly over time by integrating vue.js with a webpack development workflow piecemeal on a page-by-page basis. I've spent considerable time setting up webpack in a manner that allows it to process files found in the /dist/ folder

webpack-dev-server工具

浪尽此生 提交于 2019-12-06 04:35:05
webpack-dev-server来实现自动打包编译功能 // 1.npm install webpack-dev-server -D //2.和webpakc命令用法一样 // 3.是本地安装的,无法把它当做命令执行 // 4.本地项目必须安装webpack // 5.webpack-dev-server 帮我们打包生成main.js文件,并没有存放到实际的物理磁盘上,而是直接托管到电脑的内存中,所以项目根目录找不到main.js // 自动打包完成后自动打开浏览器 // 在package.json修改 命令开启dev-server 来源: https://www.cnblogs.com/peipeiyu/p/11962054.html

How to setup a proxy using web sockets and angular CLI

旧时模样 提交于 2019-12-06 03:15:39
I have a simple web app built using the angular CLI. I want it to communicate with a backend using web sockets. I have the backend already written and have tested with a simple index.html page that the server can send and receive on sockets. In my angular-cli project I have setup a proxy config file to setup a proxy to the backend. proxy.conf.json { "/sock": { "target": "http://localhost:3000", "changeOrigin": true, "ws": true, "logLevel": "debug" } } Then start the server with the following. ng serve --proxy-config proxy.conf.json For now I have a service that simply attempts to open a socket

Why do we need a proxy on an express.js server in order to get webpack hot reloading server functionality combined with react-routing

放肆的年华 提交于 2019-12-06 02:25:38
问题 Optional info: I'm trying to make this project built with marty.js and webpack dev server allow entry points from react-router so that it works in more than just the \ path. Thus, I'm studying THIS stack overflow answer all day long and I fail to understand the logic behind the following code and why this answer works. retozi answered: I set up a proxy to achieve this: You have a regular express webserver that serves the index.html on any > route, except if its an asset route. if it is an

React js using create-app how to set X-FRAME-OPTIONS on webpack

夙愿已清 提交于 2019-12-06 01:58:51
I've searched over the net, not sure how to set X-FRAME-OPTIONS in my react app, the web.config.js looks like this, it's using inline option when I load index.html it gives response X-FRAME-OPTIONS:DENY I need it to change it to X-FRAME-OPTIONS:SAMEORIGIN, as I need to open an iframe within my app. Right now I'm getting a chrome error and firefox error. Not sure how I can update my web.config.js in development, I'm super confused. module.exports = { devtool: 'eval', entry: { app: [ 'react-hot-loader/patch', 'webpack-dev-server/client?http://0.0.0.0' + web_port, 'webpack/hot/only-dev-server', '

webpack-dev-server proxy to docker container

末鹿安然 提交于 2019-12-05 22:49:39
问题 I have 2 docker containers managed with docker-compose and can't seem to properly use webpack to proxy some request to the backend api. docker-compose.yml : version: '2' services: web: build: context: ./frontend ports: - "80:8080" volumes: - ./frontend:/16AGR/frontend:rw links: - back:back back: build: context: ./backend expose: - "8080" ports: - "8081:8080" volumes: - ./backend:/16AGR/backend:rw the service web is a simple react application served by a webpack-dev-server. the service back is

You may need an appropriate loader to handle this file type upload image file

徘徊边缘 提交于 2019-12-05 18:24:32
I am using an image file in react-babel-webpack. But it showing an error that ERROR in ./public/assets/scissors.png Module parse failed: /home/rohit/Desktop/game/public/assets/scissors.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '�' (1:0) tool.component.js import React from 'react'; import Paper from '../../public/assets/paper.png'; import Rock from '../../public/assets/rock.png'; class Tools extends React.Component { render(){ return ( <div> <img src={Paper} name="Paper" onClick={this.select.bind(this)}

webpack+angular2 error: Uncaught ReferenceError: __decorate is not defined

别说谁变了你拦得住时间么 提交于 2019-12-05 11:44:00
问题 chrome console error: Uncaught ReferenceError: __decorate is not defined this is code https://github.com/Dreampie/angular2-demo run it: npm install npm run typings install npm run start open localhost:80 in browser someone help? 回答1: remove from tsconfig.json "declaration": true, "noEmitHelpers": false, "isolatedModules": false 来源: https://stackoverflow.com/questions/36808303/webpackangular2-error-uncaught-referenceerror-decorate-is-not-defined

webpack html (ejs) include other templates

落爺英雄遲暮 提交于 2019-12-05 11:34:44
So this is my webpack config : import path from 'path'; var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './dev/index.js' }, output: { path: path.join(__dirname, 'dist'), // publicPath: 'http://localhost:3000/', filename: 'bundle.js', chunkFilename: '[id].bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: path.resolve(__dirname, "node_modules"), loader: 'babel-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ hash: true, template: 'ejs!./dev/index.ejs', inject: 'body' }) ] }; My index.ejs file : <!DOCTYPE html> <html lang="en"> <head> <meta