webpack-dev-server

Currently we're using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process) I want to wrap the webpack stuff into gulp, so all I have to do is type gulp and it starts, watches and runs webpack and the rest of what our gulp is setup to do. So I found webpack-stream and implemented it. gulp.task('webpack', function() { return gulp.src('entry.js') .pipe(webpack({ watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style!css' }, ], }, })) .pipe(gulp.dest('dist/bundle.js')); }); The problem is that it generates a random character

如今前后端分离的的开发模式越来越成为主流，前后端分离的开发模式确实给开发带来了诸多便利， 但也带来了一些小问题，比如跨域的问题，因为前后端分开的开发模式，在开发过程中前端项目和后端项目运行在不同的源下，所以跨域问题成了前后端分离开发过程中的主要问题。 这几天，我在做一个前端小项目的时候也遇到了跨域问题，由于后台接口调用的是别人的接口，而该接口没有提供跨域访问，所以不得不使用webpack-dev-server的proxy进行跨域，开始的时候一切正常，用的舒服了，后来在访问一些需要登录的接口就有问题了，虽然我也调用它的接口做了登录功能，但是登录过后的cookie一直无法保存到本地。之后去查看了登录接口，发现其登录接口的返回的响应头中的set-cookie中设置了domain选项，由于项目在本地跑的时候是localhost，和接口的域名不一致，所以导致浏览器无法保存cookie。接着去查阅了webpack-dev-server的相关文档，终于找到了解决了办法。 在webpack-dev-server的每个代理请求中的配置项中有一个 onProxyRes 的配置项，该配置项是一个函数，可以在代理收到请求之后将数据发给浏览器之前做一层拦截，我们可以在这里修改set-cookie中domain为localhost，这样浏览器就可以把cookie保存下来

转载自：http://www.jianshu.com/p/3bdff821f859 Webpack dev server使用http-proxy解决跨域问题 文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题 ——虽然这篇是写vue的，不过用在webpack-dev-server上也是一样的 webpack设置代理 http-proxy-middleware ——webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件（ webpack.config.js ）中进行配置 module .exports = { ...此处省略一万字 // webpack-dev-server的配置 devServer: { historyApiFallback : true , hot : true , inline : true , progress : true , port : 3000 , host : '10.0.0.9' , proxy : { '/test/*' : { target : 'http://localhost' , changeOrigin : true , secure : false } } }, ..

1.npm包管理工具 npm init -y 如果创建的项目的根目录名称是中文或者包含中文，不能使用-y npm init 回车时要求你输入包的名称，自己手写项目名称，例test 2.新建src,dist文件夹 src --index.html 首页 --main.js 项目的JS入口文件 将main.js文件打包引入到index.html，这里的webpack是全局安装的 webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development <script src="../dist/bundle.js"></script> 3.自动打包 （1）安装工具webpack-dev-server,实时打包 cnpm i webpack-dev-server -D 提示需要安装webpack依赖 cnpm i webpack -D （2）项目根目录下新建配置文件 webpack.config.js //由于webpack是基于Node进行构建的，所以，webpack的配置文件中，任何合法的Node代码都是支持的 var path = require('path') //向外暴露一个配置对象 //当以命令行形式运行webpack或webpack-dev-server的时候

I am trying to do a relatively simple set up with: An Apache server with a virtual host for the HTML. Webpack and the Webpack Dev Server for asset reloading and generation. To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle. Using a basic python server (which works): Start the python webserver on http://localhost:5000 . Run npm start. Webpack Dev Server starts and proxies the python server using http://localhost:9090 . Visit http://localhost:9090 and see HTML result of python server plus Webpack assets. Using Apache