经过几天的努力终于实现了一个完美的作品，webpack可以与gulp完美结合的进行打包静态文件，并将静态文件上传到七牛云存储，当然也可以传到你想传的云存储了，这里只分享一个七牛的云存储方案。关于如何使用webpack打包静态代码，这个可以参考我之前的一些文章和方案，不行的话可以进群交流。这里只分享一下gulp这边的操作，然后给一个例子实现如何一条命令打包静态文件并更新cdn文件的方法。先展示一下gulpfile.js文件constgulp=require('gulp');constuglify=require('gulp-uglify');constconcat=require('gulp-concat');constshrink=require('gulp-cssshrin...
koa2.0.0的路由和视图渲染完之后的一个问题就是，如何高效的开发前端代码。因为我之前的前端代码是用webpack进行打包，然后打包过程中，使用babel实现了，ES6语法的转换，这行我就不能太干脆的丢弃webpack，然后里面使用了react+react-router+reflux,整个开发体系还是比较可以的。为了整合之前的代码，需要将之前的connect框架改为koa2.0.0，毕竟koa的实现方式还有与express，connect等这样的框架，实现方式不太一样，所以，稍微还有有点小困难，不过我这里记录下，也就不困难了。从webpack-dev-server说起，我们使用webpack-dev-server是为了能够时时监控我们的代码改变，然后用它自己的socket-io去刷新我们的页面，实现...
使用node的express或connect作为server来启动项目的如何去设置webpack-dev-server这里举例子说明【为这里使用的是connect，express同理】，三个文件development.js//启动文件webpack.config.development.js//开发模式的配置文件webpack.dev.server.js//webpack-dev-server启动的辅助文件先来看development.js文件'usestrict';varhttp=require('http');varconnect=require('connect');varurllib=require('urllib');varstaticServe=require('serve-static');varfinalhandler=require('finalhandler');vardebug=require('debug')('proxy');vara...
使用webpack时间越久，越觉得js越好玩，之前也写过一篇文章，但是太简陋啦。最近在配置使用webpackhotserver,整了很长时间，终于还是被我整的差不多了，而且还是正常使用啦。我的项目不是那种静态的，我使用node做server去运行项目，然后调试js的。主要的有一下几点我把主要的几个文件列出来一下：app.jswebpack.dev.server.jswebpack.config.js以上几个是主要文件在app.js里面我们要加入的配置如下if(process.env.NODE_ENV=='dev'){require('./webpack.dev.server')(app)}webpack.dev.server.js的配置如下：varwebpack=require('webpack');varWebpackDevServer=require('webpack-dev-...
这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin1，安装extract-text-webpack-plugincnpminstallextract-text-webpack-plugin--save-dev2,配置文件添加对应配置首先require一下varExtractTextPlugin=require("extract-text-webpack-plugin");plugins里面添加newExtractTextPlugin("styles.css"),我这里如下：plugins:[newwebpack.optimize.CommonsChunkPlugin('common.js'),newExtractTextPlugin("styles.css"),],modules里面对css的处理修改为{test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},千万不要重复了，不然会不起作用的我这里如...
打包jsx文件，为了使得此文件可以直接被打包，并且在应用的时候不加入后缀，需要做以下几个步骤：1，安装jsx-loader$npminstall--save-devjsx-loader2，配置module:{loaders:[{//tellwebpacktousejsx-loaderforall*.jsxfilestest:/\.jsx$/,loader:'jsx-loader?insertPragma=React.DOM&harmony'}]},3，扩展设置resolve:{extensions:['','.js','.jsx']}
1，安装需要的包npminstall--save-devwebpackwebpack-dev-server2，配置添加output:{filename:'bundle.js',//thisisthedefaultname,soyoucanskipit//atthisdirectoryourbundlefilewillbeavailable//makesureport8090isusedwhenlaunchingwebpack-dev-serverpublicPath:'http://localhost:8090/assets'//重点在这里},3，安装http-servernpminstall--save-devhttp-server4，页面添加启动脚本<!DOCTYPEhtml><html><head><title>BasicProperty&n...
//模块导入Highchartsglobal.HighchartsAdapter=require('exports?HighchartsAdapter!../../bower_components/highcharts/adapters/standalone-framework.src');module.exports=require('exports?Highcharts!../../bower_components/highcharts/highcharts.src');在entry.js文件中加入这行代码../../bower_components/highcharts/adapters/standalone-framework.src../../bower_components/highcharts/highcharts.src这两行在上面的位置代表文件的位置
1，开始使用webpack首先新建一个app的项目,在项目下面执行如下代码：$npminit//用于初始化项目的package.json//初始化文件目录：app---css---main.scss---js---index.js---a.js---b.js---c.js---es6_module.js---index.html---package.json---webpack.config.js2，安装webpac...