奥门美高梅手机版当webpack遇上node

作业是如此的

市面上的博客框架有成千上万,一先河用的WordPress,后来试过hexo、typecho
,总想自己写一个,功能简简单单就好,只为通常记点东西用。再者现在前端那么多好玩的东西也得以搭车玩一下。比如node+express+webpack+react+mongodb?怕是要搞一下试试啊~

工具搭建

node+express+webpack+react+mongodb的协会中,难点在于怎么将webpack与node串起来,前端工具最经典的职能实在监听文件变化自动刷新页面,告别人肉F5。而且,webpack有个逆天的热插拔效用,不需要刷新页面使变更生效,比如修改css样式后,不需要刷新页面就能寓目样式变更。如今组合了node,倘诺改动routes、models和views文件后也能活动刷新一下node服务,想必也是极好的。本编重要讲的就是搭建webpack的过程。

node与webpack

server端的express配合 webpack-dev-middleware(处理静态资源) 和
webpack-hot-middleware(无刷新更新)
使client端实现热插拔。而server端则需要经过重启服务器使变更生效。

奥门美高梅手机版 1

coding.gif

而重启服务器自然会使服务器通告浏览器实现自动刷新的web
socket连接断开,reload组件可以在web
socket断开时,在浏览器端开启一个稍长于服务器重启时间的定时任务,等到服务器重启完毕后,再开展四遍整页刷新。

在reload的‘Using reload in Express’中说到‘Reload can be used in
conjunction with tools that allow for automatically restarting the
server such as supervisor (recommended), nodemon, forever,
etc.’所以大家利用 supervisor 来重启服务器。

为此刷新策略为server的转移则重启node,而client端的改观则是刷新浏览器仍然热插拔。

//app.js
    var webpack = require('webpack'),
        webpackDevMiddleware = require('webpack-dev-middleware'),
        webpackHotMiddleware = require('webpack-hot-middleware'),
        webpackDevConfig = require('./webpack.config.js');

    var dll = webpack(webpackDllConfig);
    var compiler = webpack(webpackDevConfig);

    app.use(webpackDevMiddleware(compiler, {
        // publicPath与webpack.config.js保持一致
        publicPath: webpackDevConfig.output.publicPath,
        noInfo: true,
        stats: {
            colors: true
        }
    }));
    app.use(webpackHotMiddleware(compiler));

    var reload = require('reload');
    var http = require('http');
    var server = http.createServer(app);
    reload(server, app);
    server.listen(port, function(){
        console.log('App (dev) is now running on port 13300!');
    });

webpack优化

早期的webpack.config.js依旧是require一下webpack和各类插件,配置entry、output,module里面scss编译、babel编译、图片压缩或转base64,plugins里面new一下热插拔,最终把配置exports出来。好了,npm
start一下…

奥门美高梅手机版 2

npm start.png

webpack怎么没跑?打开13300端口一直在转菊花…黑人问号???好吧,事情果然没有那么粗略。于是我决定去上个厕所。回来发现…

奥门美高梅手机版 3

压缩了113s.png

webpack同学build了113s+…端口13300当真渲染出来了…第一次,想必相比较紧张…喏,不行就分喜欢就买多喝点水重启试试,来,再来一发

奥门美高梅手机版 4

一起始的活动打包.png

25s+,貌似没那么夸张了,修改文件确实可以自行重启node。但每修改一下文件要等25s打包肯定不得法。

于是webpack --colors --profile --display-modules探望怎么回事…

奥门美高梅手机版 5

奥门美高梅手机版,214个步骤.png

214个步骤……

奥门美高梅手机版 6

05jquery的build.png

jquery就无须打包了,配置externals,直接在html引入。webpack在watch格局下打包出来的文书是在内存中而不是实业文件,每一趟文件修改后webpack只改变内存文件,所以可以窥见watch格局下webpack
build的很快。同时也可以发现像在view页面引入打包后的a.js,但在public文件夹中发现一直没有a.js这个事物。要间接引入jquery就需要public存在真正的jquery.js了。在app.js中把public设置为静态目录app.use(express.static(path.join(__dirname, 'public')));,同时transfer-webpack-plugin把jquery搬到public

externals: {
     jquery: 'window.$'
}
...
new TransferWebpackPlugin([
    {from: './client/lib', to: './lib'}
], path.resolve(__dirname)),

并且,像react这种框架文件就无须插手打包了,用dll方案先打包起来。dll做的事情就是将第三方库比如react那种在开发中不会改变的文件打包起来已一个变量的样式表露在大局中。同时将所涵盖的库做一个目录写在manifest.json中。

奥门美高梅手机版 7

dll打包出来的文件

奥门美高梅手机版 8

manifest.json

//webpack.dll.config.js
const webpack = require('webpack');
module.exports = {
    output: {
        path: "./public",
        filename: '[name].js',
        library: '[name]_library'
    },
    entry: {
        vendor: ['react', 'react-dom']
    },
    plugins: [
        new webpack.DllPlugin({
            path: './manifest.json', // 本Dll文件中各模块的索引,供DllReferencePlugin读取使用
            name: '[name]_library'
        })
    ]
};

//webpack.config.js
new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./manifest.json')
})

做了上述优化以后察觉,webpack的包装如故需要将近20s。其他的像给babel配置exclude也做了,并没有怎么效率。经验注明,当一个题目由来已久不可能迎刃而解的时候就相应去上个厕所。同一个问题一个光景呆久了沉思容易僵化围着一棵树吊死,连周围的空气都充满了bug,走走换口气是很有必不可少的。尿完回到重新看了三次打包消息

奥门美高梅手机版 9

singlepage+babel.png

像singlenote.js这么些js,在一初步测试的时候实在没什么逻辑在其中但是building长达15s。最后通过高中生物经典的‘控制单一变量法’发现是babel打包在搞工作呀。。。然鹅,我并从未搜到有效的增高babel打包效用的点子。

退一步想,其实server端频繁重启本来就稍微科学,像routes文件一般写好了路由之后更改较少,所以要不server端就毫无自行刷新了呢。。。(狗子!你忘了早已全栈刷新的誓词了吧!狗子你变了!)

本来views只是页面模板文件,仍旧得以刷新的,需要救援一下,这时候需要引入browser-sync来监督view页面的改动。browser-sync这么些插件早年在gulp时代就早已名声在外,多终端自动刷新,真正的change
once refresh anywhere~重新写个app_browsersync.js,把reload那一块替换。

var bs = require('browser-sync').create();
    app.listen(port, function(){
        bs.init({
            open: false,
            ui: false,
            notify: false,
            proxy: 'localhost:13300',
            files: ['./server/views/**'],
            port: 8080
        });
        console.log('App (dev) is going to be running on port 8080 (by browsersync).');
    });

线上包裹

以上说的都是付出环境,做的配备都是福利开发,线上的打包则从未那么多幺蛾子。比如:热插拔什么的就绝不了;比如css文件要分手,webpack可以打包各类资源最后打成一个js,是的,css也在这一个js里面,而这么会招致css只可以在这一全方位js文件下载完毕后才起来渲染,大大延伸了白屏时间…

最后一发优化

有如整的基本上了,真是个欢乐波折的旅程,于是自己把全部项目都扔到了github上,因为事先都是在自身年迈的记录簿上敲的,既然放到github上就顺手把它拉到开发机上玩玩,速度装完git,mongodb后,npm
start…

奥门美高梅手机版 10

开发机

不到2s!!!电脑配置啊!硬件啊!优化不仅仅是软件代码层面啊!再算一下,4位数飞秒,2s没错,修整一下大约1s的打包!泪流满面啊,根本控制不住寄几!狗子,当年全栈刷新的誓言我直接记着…当自己低头一看,胸前的工卡闪闪发光…

结语

现今,那个简单(简陋…)的站点已经起来服役。前边再持续修复下界面。

奥门美高梅手机版 11

首页

相关文章