走进webpack(1)--环境拆分及模块化

  初级的文章和demo已经基本完成了,代码也已经上传到了我的github上,如果你对webpack的使用并不是十分了解,那么建议你回头看下走近系列,里面包括了当前项目中使用频繁的插件,loader的讲解。以及基本的webpack配置,相关依赖等。如果你已经有了一定的webpack使用经验。那么你直接看这篇文章也是完全没问题的。

  这一系列会着重讲解webpack的进阶使用方法,前面文章讲解过的一些部分,就不会再去重复的解释。

  那么,还是先交代一下环境以及目录结构,这些你可以直接从github上获取到:

  下面是当前的环境配置版本:

  在实际的工作当中,我们会区分不同的环境来执行不同的webpack配置代码,以实现不同环境的要求,当前的主要环境其实就两个,一个开发环境,一个生产环境。开发环境更倾向于便捷的调试,开发的方便,比如热加载等。而生产环境希望代码的体积更小,http请求更少,页面的加载速度更快。甚至有些时候两个环境的要求是互斥的。所以才需要根据不同的环境来配置不同的代码。

  废话不多说,咱们直接进入正题吧。

  在前面的文章中,为了使静态资源找到正确的路径,我们设置了一个变量webpath,那么如果要区分环境,变量的值肯定是不同的,那么我们如何根据命令来使webpath获得不同的值呢,其实很简单:

  修改一下package.json中的build命令和dev命令,加上一个参数,然后我们在webpack.config.js中可以通过process.env来获取到这个参数。这样就可以区分不同的环境了。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "set type=build&webpack --mode production",
  "dev": "set type=dev&webpack-dev-server --mode development",
  "version": "webpack -v"
}

  那么修改完package.json中的命令后,我们还需要修改一下webpack.config.js中webpath那段代码:

/*根据参数的不同来区分不同的环境*/
if(process.env.type == "build"){
    var webpath={
/*这个地址目前是随便写的,只是为了区别于开发环境,真实上线的话要改成你上线的地址*/
        publicPath:"http://www.zaking.com/"
    }
}else{
    var webpath={
        publicPath:"http://192.168.199.124:9090/"
    }
}

  这样就可以了,运行不同的命令来试试效果如何吧。这里简单说明一下,process.env是什么,process是node的一个全局环境变量,process.env.type也就是你设置在scripts命令中的type值。更详细的内容不在这里多说,有强迫症的小伙伴可以去看看这里:https://nodejs.org/dist/latest-v8.x/docs/api/process.html#process_process_env

  那么环境拆分说完了,如何模块化配置webpack呢?其实也很简单,听起来比较高逼格罢了。简单说就是把通用变量放在一个单独的js文件中,然后通过export暴露接口,require引入接口而已!比如你在使用vue中一定写过很多这种东西,再简单也要说一下滴。

  我们新建一个与webpack.config.js同级的文件夹,名字就叫做entry.js(入口)。然后我们在entry.js中写入入口配置的代码:

const entry ={};  
//声明路径属性
entry.path={
    main:'./src/main.js'  
}
//导出该变量
module.exports = entry;

  然后在webpack.config.js中引入该模块,并且修改下入口处的配置代码:

/*在这里引入entry文件的路径*/
const entry =  require("./entry.js");
  /*入口文件*/
entry:entry.path

  这样就实现了所谓的模块化,当然这里只是举一个简单的例子,复杂的配置项目可能会有逻辑复杂的模块化配置。比如vue-cli那样的,现在你再去看看vue-cli的代码,应该也可以看懂一些了,只是它的功能更为复杂,模块的关联更强。那么这篇文章就暂时写到这里。下一篇会带大家一起看看如何打包第三方类库等更贴近生活的实用技能。本篇文章的代码也已经同步更新到github上了,以后随着文章的更新会实时同步代码,方便大家学习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

VirtualBox-Linux系统安装增强功能

3691
来自专栏程序员互动联盟

【记忆卡片】linux网络命令

Linux网络命令是我们比较常用的命令,重要性和使用频度都很高。Linux下网卡命名规律:eth0,eth1。第一块以太网卡,第二块。lo为环回接口,它的IP地...

3574
来自专栏PHP实战技术

Redis实现缓存,你应该懂的哪些思路!

场景一:类似于微博,实现关注和被关注功能。 思路: 对每个用户使用两个集合类型键,用来存储关注别人的用户和被该用户关注的用户。当用户A关注用户B的时候,执行两步...

3817
来自专栏Java成长之路

Java线程调度与线程优先级

线程调度是指系统为线程分配处理器使用权的过程,主要调度方式有两种,分别是协同式线程调度和抢占式线程调度。

2352
来自专栏资深Tester

软件测试人员在工作中如何运用Linux

2934
来自专栏c#开发者

HTML5手机APP开发入门(1)

HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicf...

5198
来自专栏静晴轩

详解 Cookie 纪要

从事 Web 开发已有近17个月;在学以致用的工作学习里,对于不怎么使用的部分,多少有些雾里探花的窘迫感~差不多是了解一二,然而又非真切的明晰;这就使得再用的时...

3539
来自专栏Python

cookie详解

今天看到一篇cookie的文章,写的特别详细,感谢 晚晴幽草轩 的分享,原文链接http://mp.weixin.qq.com/s/NXrH7R8y2Dqxs9...

4453
来自专栏云计算教程系列

如何在CentOS 6.5上使用Unicorn和Nginx部署Rails应用程序

在部署基于Rails的Web应用程序时,简单设计的应用程序服务器可以在几分钟内启动并运行。但是,如果您希望更好地控制服务器设置或想要尝试更灵活的新功能,那么使用...

1482
来自专栏JetpropelledSnake

Python Web学习笔记之进程与线程

要了解二者的区别与联系,首先得对进程与线程有一个宏观上的了解。     进程,是并发执行的程序在执行过程中分配和管理资源的基本单位,是一个动态概念,竟争计算机系...

2917

扫码关注云+社区

领取腾讯云代金券