初级的文章和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上了,以后随着文章的更新会实时同步代码,方便大家学习。

走进webpack(1)--环境拆分及模块化的更多相关文章

  1. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  2. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  3. webpack、babel模块、模块化

    一.webpack介绍 webpack这个工具非常强大,解决了前端很繁琐的一些工具流程繁琐的事情.中文官网链接地址:https://www.webpackjs.com/ 1.为什么要使用webpack ...

  4. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  5. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  6. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  7. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  8. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  9. 安装webpack命令环境

    1.通过cnpm安装webpack命令环境,如图 2.安装完后查看webpack的版本,如图

随机推荐

  1. ubuntu追加磁盘空间

    在用wubi安装的时候,按默认的是20G空间,明显不够用,从Windows上追加空间 首先用win7自带的磁盘分区工具,从任意一个空余空间较多的磁盘划出一块新分区(无损数据)(如NTFS),作为ubu ...

  2. Django使用模板后无法找到静态资源文件

    Django使用模板后无法找到静态资源文件 环境配置 Django版本1.11 python版本3.6.2 前言 在编写Django网站的时候,在涉及模板方面,一些简单的例子都没有问题,但这些例子都有 ...

  3. Linux CentOS7下安装python3

    在CentOS7下,默认安装的就是python2.7,我现在来教大家如何安装python3: 1.首先安装python3.6可能使用的依赖 # yum -y install openssl-devel ...

  4. 1.4 PCI总线的中断机制

    PCI总线使用INTA#.INTB#.INTC#和INTD#信号向处理器发出中断请求.这些中断请求信号为低电平有效,并与处理器的中断控制器连接.在PCI体系结构中,这些中断信号属于边带信号(Sideb ...

  5. 3.3.2 PCI设备对不可Cache的存储器空间进行DMA读写

    在x86处理器和PowerPC处理器中,PCI设备对"不可Cache的存储器空间"进行DMA读写的过程并不相同.其中PowerPC处理器对"不可Cache的存储器空间&q ...

  6. R学习笔记(4): 使用外部数据

    来源于:R学习笔记(4): 使用外部数据 博客:心内求法 鉴于内存的非持久性和容量限制,一个有效的数据处理工具必须能够使用外部数据:能够从外部获取大量的数据,也能够将处理结果保存.R中提供了一系列的函 ...

  7. Caused by: java.lang.ClassNotFoundException: org.apache.commons.fileupload.RequestContext

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  8. ASP.NET登录记住用户名

    案例如下: 1:首先在登录的控制器中定义一个全局变量 public const string LonginName = "sessName"; 2:在登陆的方法中 public A ...

  9. 消息队列mq的原理及实现方法

    消息队列技术是分布式应用间交换信息的一种技术.消息队列可驻留在内存或磁盘上,队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可独立地执行--它们不需要知道彼此的位置.或在继续执行前不需要等待 ...

  10. (luogu P1383)高级打字机

    高级打字机 题目链接 https://www.luogu.org/problemnew/show/P1383 背景 无聊中.. 随便在luogu上rand到了一道题 从此走上不归路 主席树是我暑假的时 ...