webpack使用的心得
1 . 我们需要使用打包工具,首先第一步就得 执行 npm install进行安装,可是很多时候 加载速度很慢,这个时候我们可以 用淘宝镜像源,参考地址:
https://npm.taobao.org/
使用方法如下:
npm install --registry=https://registry.npm.taobao.org
全局配置镜像源:
淘宝镜像:在命令行中敲入npm config set registry=https://registry.npm.taobao.org
朗沃服务器镜像:在命令行中敲入npm config set registry=http://192.168.8.10:7001
这样速度就加快了很多了,不信请试试
或者直接安装 cnpm ,
安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 确认是否安装成功。以后加载模块直接使用 cnpm
以后安装包的时候就直接 cnpm install webpack速度就会快很多
2. 另外一个 是我们在项目中一般是 本地开发的时候一个 配置文件,发布的时候一个 配置文件,那如果我项目中配置本来不是很多的情况下,我不想分几个配置文件,只用一个webpack.config.js,可以是这样的话 我们就需要针对不用的开发环境 对配置进行管理,通常在插件里配置:
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
然后在package.json文件里配置变量:
如:process.env是一个环境变量,所以需要你设置NODE_ENV变量,
on OS X or Linux: export NODE_ENV=development
windows: SET NODE_ENV=development
完整的命令如下:
export NODE_ENV=development && webpack 或者
export NODE_ENV=development && webpack-dev-server --inline
3. 还有一个 我们比较关注的是,在项目中我们希望打包多个css文件,在项目中根据情况引用,可以参考如下链接,讲解的非常清楚:
https://webpack.github.io/docs/stylesheets.html
4. 在项目中如果需要有全局变量,得用window去定义,比如有一个global.js文件里,如果需要把某个函数或者变量当成全局的,则可以这样:
global.js:
window.globalFun=function() {
var test='123';
console.log(test);
}
在global.html文件引入global.js,这样在各个.js/.jsx文件就可以直接用globalFun这个全局函数了。
5. 在项目比较大的情况下,会有很多输入的文件,我们不可能手动的去一个个添加配置,因为文件也会随时变化,包括文件名也可以会做修改,所以我们可以用glob插件帮我们做正则匹配,
安装:npm install glob
使用:var glob=require('glob');
var files = glob.sync(path.join(staticPath, '*/js/*.jsx'));
var newEntries = {}; files.forEach(function(file){
var substr = file.match(/resources\/static(\S*)\.jsx/)[];
var strObj=substr.split('/');
if(strObj[]=='public') {
if(/global_page/.test(strObj)) {
newEntries[substr] = file;
}
}
else {
newEntries[substr] = file;
}
});
commonOptions.entry = newEntries;
console.log(newEntries);
6. 在项目中对图片的打包路径和格式
webpack使用的心得的更多相关文章
- 前端性能优化--图片懒加载(lazyload image)
话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...
- sublime,webstrom,vscode的使用感受,以及对于vue和webpack的支持,还有一些快捷键使用心得
从最开始用sublime3到webstrom再到vscode,我的感觉如下: sublime首次加载项目文件速度较快,每次装插件有点麻烦,插件很丰富,也很好用. webstrom首次加载项目文件速度奇 ...
- webpack vuejs项目学习心得
最近在做移动端的项目,最近webpack和vuejs很火,就想到了用vuejs webpack来构建我的项目 先了解了一些webpack的入门基础 http://webpack.github.io/d ...
- webpack 学习心得(一)
Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webp ...
- 前端模块化工具--webpack学习心得
话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...
- webpack使用打包的一些心得
webpack打包工具: module.exports:输出require:引入 require('!style-loader!css-loader!./***.css'):静态样式引入 npm in ...
- webpack 错误心得
使用webpack 打包项目已经有很长一段时间了,在使用过程中也碰到各种恶样的坑,常见的错误,当然也有少见的错误,今天写这篇文章主要是想分享找出错误和解决错误的方法. 而不是分享具体的错误例子,因为实 ...
- webpack解惑:多入口文件打包策略
本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包 ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
随机推荐
- 织梦dedecms漏洞修复大全(5.7起)
很多人说dedecms不好,因为用的人多了,找漏洞的人也多了,那么如果我们能修复的话,这些都不是问题. 好,我们来一个一个修复.修复方法都是下载目录下该文件,然后替换或添加部分代码,保存后上传覆盖(记 ...
- problems during rovio build
1. rovio的readme中使用的是catkin build, ROS tutorial中用的是catkin_make. 关于build与make的区别: build重新编译所有文件:make默认 ...
- mongodb管理篇
一. 管理工具集 数据迁移 Mongoexport:用于针对colletions的数据导出,或者打开单个字段. Mongodbimport:与只对应,这个表示在导出的基础上导入. 数据库的备份恢复 ...
- [LeetCode] 4Sum II 四数之和之二
Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...
- [LeetCode] Search in Rotated Sorted Array II 在旋转有序数组中搜索之二
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...
- ASP.NET - Web API,从简单类型到复杂类型的参数传递用例,以及传递简单string类型的解决办法
一,简单类型的传值 比如 public Users Get(int id) ,它可以使用两种方式获取: api/default/ $.get("/api/default",{id: ...
- 用vue.js学习es6(四):Symbol类型
一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...
- 查看mysql语句运行时间的2种方法
网站运行很慢的时候,我就特别起知道为什么这么慢,所以我查啊查,数据库绝对是很重要的一部分,里面运行的sql是绝对不能放过的.平时做项目的时候,我也会注意sql语句的书写,写出一些高效的sql来,所以我 ...
- commons configuration管理项目的配置文件
Commons Confifutation commons configuration可以很方便的访问配置文件和xml文件中的的内容.Commons Configuration 是为了提供对属性文件. ...
- 页置换算法FIFO、LRU、OPT
页置换算法FIFO.LRU.OPT 为什么需要页置换 在地址映射过程中,若在页面中发现所要访问的页面不再内存中,则产生缺页中断.当发生缺页中断时操作系统必须在内存选择一个页面将其移出内存,以便为即将调 ...