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使用的心得的更多相关文章

  1. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  2. sublime,webstrom,vscode的使用感受,以及对于vue和webpack的支持,还有一些快捷键使用心得

    从最开始用sublime3到webstrom再到vscode,我的感觉如下: sublime首次加载项目文件速度较快,每次装插件有点麻烦,插件很丰富,也很好用. webstrom首次加载项目文件速度奇 ...

  3. webpack vuejs项目学习心得

    最近在做移动端的项目,最近webpack和vuejs很火,就想到了用vuejs webpack来构建我的项目 先了解了一些webpack的入门基础 http://webpack.github.io/d ...

  4. webpack 学习心得(一)

    Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webp ...

  5. 前端模块化工具--webpack学习心得

    话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...

  6. webpack使用打包的一些心得

    webpack打包工具: module.exports:输出require:引入 require('!style-loader!css-loader!./***.css'):静态样式引入 npm in ...

  7. webpack 错误心得

    使用webpack 打包项目已经有很长一段时间了,在使用过程中也碰到各种恶样的坑,常见的错误,当然也有少见的错误,今天写这篇文章主要是想分享找出错误和解决错误的方法. 而不是分享具体的错误例子,因为实 ...

  8. webpack解惑:多入口文件打包策略

    本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包 ...

  9. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

随机推荐

  1. 织梦dedecms漏洞修复大全(5.7起)

    很多人说dedecms不好,因为用的人多了,找漏洞的人也多了,那么如果我们能修复的话,这些都不是问题. 好,我们来一个一个修复.修复方法都是下载目录下该文件,然后替换或添加部分代码,保存后上传覆盖(记 ...

  2. problems during rovio build

    1. rovio的readme中使用的是catkin build, ROS tutorial中用的是catkin_make. 关于build与make的区别: build重新编译所有文件:make默认 ...

  3. mongodb管理篇

    一.  管理工具集 数据迁移 Mongoexport:用于针对colletions的数据导出,或者打开单个字段. Mongodbimport:与只对应,这个表示在导出的基础上导入. 数据库的备份恢复 ...

  4. [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 ...

  5. [LeetCode] Search in Rotated Sorted Array II 在旋转有序数组中搜索之二

    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...

  6. ASP.NET - Web API,从简单类型到复杂类型的参数传递用例,以及传递简单string类型的解决办法

    一,简单类型的传值 比如 public Users Get(int id) ,它可以使用两种方式获取: api/default/ $.get("/api/default",{id: ...

  7. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  8. 查看mysql语句运行时间的2种方法

    网站运行很慢的时候,我就特别起知道为什么这么慢,所以我查啊查,数据库绝对是很重要的一部分,里面运行的sql是绝对不能放过的.平时做项目的时候,我也会注意sql语句的书写,写出一些高效的sql来,所以我 ...

  9. commons configuration管理项目的配置文件

    Commons Confifutation commons configuration可以很方便的访问配置文件和xml文件中的的内容.Commons Configuration 是为了提供对属性文件. ...

  10. 页置换算法FIFO、LRU、OPT

    页置换算法FIFO.LRU.OPT 为什么需要页置换 在地址映射过程中,若在页面中发现所要访问的页面不再内存中,则产生缺页中断.当发生缺页中断时操作系统必须在内存选择一个页面将其移出内存,以便为即将调 ...