搞个小例子便于学习:

具体操作为把上节中的webpack.config.js中的entry入口文件进行模块化设置,单独拿出来制作成一个模块。

1.在根目录新建一个config文件,然后新建webpack.entry.js文件,代码如下:

webpack.entry.js:

//声明entry变量
const entry ={};
//声明路径属性
entry.path={
entry:'./src/entry.js'
}
//进行模块化
module.exports =entry;

2.entry模块中的代码写完好,改造我们之前在webpack.config.js文件中入口文件引入方式。

(1)使用require()将模块代码引入

const entry=require("./config/webpack.entry.js");

(2)然后在入口文件部分,修改成如下代码:

entry:entry.path,

3.测试引入是否成功

使用npm run dev 进行测试,结果为成功打包,说明模块化成功了。

此处只是简单做了入口文件的模块化,其余的操作方式类似。

(18/24) webpack实战技巧:快速入门webpack模块化配置的更多相关文章

  1. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...

  2. (19/24) webpack实战技巧:推荐使用的第三方类库打包方法

    在日常的开发中,总避免不了引入第三方的框架,比如常用的JQuery,此节我们来学习一下如何优雅并正确的用webpack引入第三方库. 这里我们以第三方框架JQuery为例: 1.在入口文件中引入 1. ...

  3. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  4. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  5. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  6. RockerMQ实战之快速入门

    文章目录 RocketMQ 是什么 专业术语 Producer Producer Group Consumer Consumer Group Topic Message Tag Broker Name ...

  7. RocketMQ 实战之快速入门

    原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...

  8. (23/24) webpack实战技巧:如何在webpack环境中使用Json

    在webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loader的loader进来的.但是在webpack3.x版本中,则不需要在另外引入 ...

  9. (22/24) webpack实战技巧:静态资源集中输出

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时 ...

随机推荐

  1. Codeforces1106F 【BSGS】【矩阵快速幂】【exgcd】

    首先矩阵快速幂可以算出来第k项的指数,然后可以利用原根的性质,用bsgs和exgcd把答案解出来 #include<bits/stdc++.h> using namespace std; ...

  2. 关于FormData及其用法

    XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttp ...

  3. POJ 2407:Relatives(欧拉函数模板)

    Relatives AC代码 Relatives Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16186   Accept ...

  4. 【洛谷P1338】末日的传说

    https://www.luogu.org/problemnew/show/P1338 [题目大意:从1到n的连续自然数,求其逆序对数为m的一个字母序最小的排列.] 最开始的思路是想从逆序对数入手,然 ...

  5. 网卡驱动_WDS

    参考 cs89x0.c 1.网卡驱动程序与网络驱动程序的区别网卡驱动程序:网络驱动程序中最底层的驱动,主要工作:把上面发下来的数据发送出去,收到数据后构造一个包抛给上层.有收发能力就可以了. 2.网卡 ...

  6. leetcode:Longest Common Prefix【Python版】

    1.当strs为空,直接输出“” 2.当strs中含有“”,直接输出“” 3.strs[0]的最长长度由最短公共长度l决定(code line:15) class Solution: # @retur ...

  7. grandstack graphql 开发模型

    当前grandstack 支持两类开发方式 js (使用Neo4j-graphql-js) 插件模型 js 模型 参考https://github.com/rongfengliang/grand-st ...

  8. 模板引擎jade学习

    语言参考 标签列表 doctype Tags Block Expansion Attributes Boolean Attributes Class Attributes Class Literal ...

  9. H.264帧结构详解

    6.1.2.源码简单浏览 6.1.3.重点1:h.264帧结构6.1.4.重点2:帧结构分析软件的使用6.1.5.重点3:rtsp网络编程6.1.6.重点4:wireshark网络抓包工具的使用 6. ...

  10. Oracle 联机重做日志文件(ONLINE LOG FILE)

    --========================================= -- Oracle 联机重做日志文件(ONLINE LOG FILE) --================== ...