搞个小例子便于学习:

具体操作为把上节中的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. ajax请求成功回调函数没有执行问题

    如下常见的ajax前端请求,请求成功后success:function(result){ 这里的数据没有执行 }: $.ajax({ type:"post", url:" ...

  2. BZOJ3925: [Zjoi2015]地震后的幻想乡【概率期望+状压DP】

    Description 傲娇少女幽香是一个很萌很萌的妹子,而且她非常非常地有爱心,很喜欢为幻想乡的人们做一些自己力所能及的事情来帮助他们. 这不,幻想乡突然发生了地震,所有的道路都崩塌了.现在的首要任 ...

  3. java内存的分配和管理

    常用的三个内存空间 栈内存 ,堆内存 ,方法区 栈内存存储的内容: 局部变量. 函数(栈中的局部变量,需要手动赋值.当变量,或者函数执行完毕,就自动被释放) 堆内存,存储的内容 :全局变量.数据容器. ...

  4. test20181005 迷宫

    题意 分析 时间复杂度里的n,m写反了. 出题人很有举一反三的精神. 代码 我的代码常数巨大,加了各种优化后开O3最慢点都要0.9s. #include<cstdlib> #include ...

  5. $.each()与$(selector).each()

    $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可 ...

  6. PostgREST docker-compose 试用

    PostgREST 是一款很不错的直接将pg 数据库暴露为restapi ,使用了基于行级别安全访问控制, 比较全的restapi 查询以及集成了swagger openapi docker-comp ...

  7. SQL Server 中关于EXCEPT和INTERSECT的用法

    熟练使用SQL Server中的各种用法会给查询带来很多方便.今天就介绍一下EXCEPT和INTERSECT.注意此语法仅在SQL Server 2005及以上版本支持. EXCEPT是指在第一个集合 ...

  8. java 多线程之 线程优先级和守护线程

    线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5."高优先级线程"会优先于"低优先级线程"执行. java 中有两种线程:用户线程和 ...

  9. websocket小体验

    http://www.cnblogs.com/GoodHelper/p/7078381.html https://segmentfault.com/a/1190000012084213

  10. Notepad++ 删除空白行的方法

    Notepad++ 是我特别喜欢的一款编程工具.在安装后就可以轻松使用了.Notepad++ 上提供了很多方便的插件以实现更多的扩展,当然自身已经比较强大好用了.如果你遇到文本中间有大量的空白行的话, ...