webpack
chiuwingyan
掘金:https://juejin.im/user/5b0919e151882538b1096f08
展开
-
webpack模块热替换教程
我们用vue或者react脚手架时,我们会发现,我们修改代码时,浏览器不会刷新,更改对应的部分会自动刷新,这就是模块热替换。下面主要介绍webpack和react-hot-loader。webpack模块热替换package.json 增加 --hot"start": "webpack-dev-server --config webpack.dev.config.js --color --prog...原创 2018-05-03 13:42:03 · 1155 阅读 · 0 评论 -
webpack-DllPlugin优化工程构建速度
前言如果我们的webpack工程变得越来越大,我们会发现,我们工程打包的速度会变得越来越慢。为了提升我们的开发效率,我们应该要做一些优化。CommonsChunkPlugin 一般来说,如果我们的工程涉及了很多的第三方库,而我们的第三方库一般来说都是不会被修改的,因此,我们的做法就是把第三方库作为一个文件提取出来,避免每次修改代码都会对第三方库重新构建,而且业务代码本身的模块体积也会小...原创 2018-07-22 17:32:16 · 1450 阅读 · 0 评论 -
React工程的服务端渲染简单配置
创建服务端渲染打包的入口文件server-entry.jsimport React from 'react';import App from './App.jsx';export default <App />;创建服务端渲染的webpack配置文件webpack.config.server.jsconst path=require('path');m...原创 2018-07-30 10:32:46 · 546 阅读 · 0 评论 -
sockte.io基本使用
服务端io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit(‘String’,data);//给所有客户端广播消息io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息socket.on(‘String’,...原创 2018-07-23 15:02:18 · 471 阅读 · 0 评论 -
Hot-Module-Replacement详细配置说明
前言在react工程中要实现热加载,就是只更新局部的修改,我们可以使用react-hot-loader。安装依赖npm install --save-dev react-hot-loader修改.babelrc配置文件 { plugins: ["react-hot-loader/babel"] }开启webpack-dev-server的HMR因为react-hot-loa...原创 2018-06-30 14:40:30 · 6453 阅读 · 0 评论 -
webpack加入 babel-plugin-transform-runtime 和 babel-polyfill
先来说说babel-plugin-transform-runtime在转换 ES2015 语法为 ECMAScript 5 的语法时,babel 会需要一些辅助函数,例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里,这样文件多的时候,项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-run...原创 2018-06-22 18:00:19 · 14144 阅读 · 0 评论 -
bundle-loader实现按需加载
前言如果我们不进行按需加载, 把所有js加载到一个文件里面,会造成首屏加载慢的问题,毕竟把当前页面不需要的js也加载进来,因此我们要进行按需加载操作。在react-router4之前,按需加载使用的是require.ensure的方法,异步加载组件。在react-router4,官方推荐使用webpack的bundle-loader进行按需加载。bundle-loader原理npm i --sav...原创 2018-06-14 19:08:45 · 5563 阅读 · 0 评论 -
webpack的css loader
前言webpack里面,其实只能识别js,如果要对css进行处理,我们要安装一些loader。css-loader当然,如果你想用sass、less之类的,安装对应的scss-loader即可,我这里使用的是css-loader。如果想要把css文件作为<style>的内容插入到模板文件当中,首先要安装css-loader,可以让js加载css,通过import即可把css引入进来。如...原创 2018-06-14 14:32:10 · 794 阅读 · 0 评论 -
webpack代码分离ensure(同步加载及异步)
前言首先,webpack里的引入是使用require,导出是使用module.exports,也就是common.js规范。例如:const path = require('path');module.exports = { /*入口*/ entry: [ 'react-hot-loader/patch', path.join(__dirna...原创 2018-06-12 17:35:53 · 1740 阅读 · 0 评论 -
webpack 的 loader 和 plugin的区别
https://blog.csdn.net/wp270280522/article/details/51496436转载 2018-10-29 14:17:16 · 7676 阅读 · 0 评论