webpack 多个js打包为1个_webpack 将多个js文件打包成一个js文件 - CSDN
精华内容
参与话题
  • webpack4打包多个js文件

    万次阅读 2018-07-19 16:36:15
    1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module.exports = { mode: "development", //打包为开发模式 // 入口配置的对象中,属性...

    默认文件目录:

    1.多个js文件不合并打包(分别打包)

    配置文件./conf/webpack.dev.js

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 入口配置的对象中,属性为输出的js文件名,属性值为入口文件
        entry: {
        	main1:"./src/main1",
        	main2:"./src/main2"
        }, //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
        }
    }

    打包过程:

    打包结果:

    2.多个js中部分合并打包成一个js文件

    配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 出口对象中,属性为输出的js文件名,属性值为入口文件
        entry: {
        	main1:"./src/main1",
        	main:["./src/main2","./src/main3"]
        }, //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
        }
    }

    3.多个js全部打包成一个js文件

    配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 出口对象中,属性为输出的js文件名,属性值为入口文件
        entry: ["./src/main1","./src/main2","./src/main3"], //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "main.js" 
        }
    }

     

    展开全文
  • 使用webpack合并js文件

    万次阅读 2017-07-11 17:35:54
    Webpack一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前,先说一写webpack的基础知识。1什要使用WebPack现今的很网页...

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    在代码实践之前,先说一写webpack的基础知识。

    1、为什要使用WebPack

    现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

    • 模块化,让我们可以把复杂的程序细化为小的文件;
    • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
    • Scss,less等CSS预处理器

    2、什么是Webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

    3、WebPack和Grunt以及Gulp相比有什么特性

    其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

    Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
    这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

    这里写图片描述

    Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

    这里写图片描述

    从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。


    接下来我们简单为大家介绍
    Webpack如何将多个js文件合并(注意这里只是文件的合并,即将多个写好的js合成一个js文件,以减少http请求)。

    安装webpack

    在安装 Webpack 前,你本地环境需要支持 node.js。安装node.js可以参考node官方文档。

    使用如下命令在全局安装webpack。

    $ npm install webpack -g

    webpack已经安装到计算机上,现在可以使用webpack命令了。

    在项目中使用webpack

    使用以下命令在项目根目录下生成package.json文件。

    $ npm init

    安装webpack到项目中

    将webpack加入到pageage.json配制文件中,使用以下命令:

    $ npm install --save-dev webpack

    此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。
    这里写图片描述

    配置webpack.config.js文件

    在项目的根目录下新建一个webpack.config.js文件。配置文件如下:

    这里写图片描述

    • context

    上下文选项用来决定根目录(即绝对路径)的入口文件

    • entry

    打包文件的入口点。

    • output

    output选项告诉webpack如何编译文件到硬盘中,值得注意的是,虽然entry中可以使用一个对象传入多个入口点文件,但是只能给ouput设置一个配置项。

    最后,我们将上面的js合并成了一个single.js。只要在项目中引入这个js即可。

    参考链接:https://segmentfault.com/a/1190000006178770

    展开全文
  • 浅谈webpack打包原理

    万次阅读 2019-04-29 17:57:45
    模块化机制webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接...有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包webpack会帮你处理好的。

    浅谈webpack打包原理

    模块化机制

    webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目。有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,webpack会帮你处理好的。

    关于模块化的一些内容,可以看看我之前的文章:js的模块化进程

    核心思想:

    1. 一切皆模块
      正如js文件可以是一个“模块(module)”一样,其他的(如css、image或html)文件也可视作模 块。因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的。
    2. 按需加载
      传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。

    文件管理

    • 每个文件都是一个资源,可以用require/import导入js
    • 每个入口文件会把自己所依赖(即require)的资源全部打包在一起,一个资源多次引用的话,只会打包一份
    • 对于多个入口的情况,其实就是分别独立的执行单个入口情况,每个入口文件不相干(可用CommonsChunkPlugin优化)

    打包原理

    把所有依赖打包成一个bundle.js文件,通过代码分割成单元片段并按需加载。

    在这里插入图片描述

    如图,entry.js是入口文件,调用了util1.js和util2.js,而util1.js又调用了util2.js。

    打包后的bundle.js例子

    /******/ ([
    /* 0 */		//模块id
    /***/ function(module, exports, __webpack_require__) {
    
        __webpack_require__(1);		//require资源文件id
        __webpack_require__(2);
    
    /***/ },
    /* 1 */
    /***/ function(module, exports, __webpack_require__) {
    	//util1.js文件
        __webpack_require__(2);
        var util1=1;
        exports.util1=util1;
    
    /***/ },
    /* 2 */
    /***/ function(module, exports) {
    	//util2.js文件
        var util2=1;
        exports.util2=util2;
    
    /***/ }
    ...
    ...
    /******/ ]);
    
    1. bundle.js是以模块 id 为记号,通过函数把各个文件依赖封装达到分割效果,如上代码 id 为 0 表示 entry 模块需要的依赖, 1 表示 util1模块需要的依赖
    2. require资源文件 id 表示该文件需要加载的各个模块,如上代码_webpack_require__(1) 表示 util1.js 模块,__webpack_require__(2) 表示 util2.js 模块
    3. exports.util1=util1 模块化的体现,输出该模块
    展开全文
  • 1webpack概述:webpack款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装:在安装Webpack之前,我们的本地环境需要支持node.js。安装...

    1、webpack概述:

    webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

    2、全局安装:

    在安装Webpack之前,我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。

    使用如下命令在全局安装webpack

    npm install webpack -g


    3、webpack的使用步骤

    A:JS文件的引用

    (1)创建一个名为webpack的文件夹,里面创建两个文件夹,一个是app,一个是build;创建一个名为”webpack.config.js“的配置文件。

    (2)在webpack文件夹下执行以下命令,生成package.js文件:

    npm init

    文件内容如下:此文件用来告知一些基本信息


    (3)在webpack文件夹下执行以下命令,配置webpack的相关服务:

    npm install --save-dev webpack-dev-server
    经过以上操作,package.json文件中,多出以下一段代码:


    (4)配置在第一步创建的webpack.config.js文件:


    如图所示:app文件夹中需要有index.js文件,可以随便写一些js代码进去,然后在build文件夹中需要有bundle.js文件,它就是打包文件。

    (5)打包文件的使用:

     在build文件夹中新建一个index.html文件,引入同目录下的bundle.js文件。

    配置快速启动webpack,在package.json文件里加入

     "scripts": {
         "start": "webpack",
         "server": "webpack-dev-server --open"
       },

    到此,我们的package.json文件里的内容是这样的:


    如果有哪里不对的,小伙们记得自己检查一下啊。

    (6)运行终端,打包js文件到bundle.js

    在终端中,定位到当前文件夹webpack---cd 当前目录

    然后执行webpack命令,webpack就已经开始运行了:


    (7)之后去运行index.html页面,就能看到效果了。


    B:CSS文件的引用

     经过了引入JS的操作,引入CSS文件的操作就简单多了

    (1)首先,我们需要下载css样式加载模板的文件

    npm install style-loader css-loader --save

    (2)在配置文件中,加入以下代码:


    这里尤其需要注意的一点是,在运行终端之前,

    需要在index.js文件中,引入index.css文件,以便于二者一并被打包起来。


    现在的终端界面是这样的:


    细心的小伙伴可能发现了,刚才的那张终端截图,它只监控着index.js的运行,

    而上面这张,加入了css的监控和打包,是不是很神奇啊


    另外还有一点需要注意的是,加完上述打包css的代码后,需要重新运行打包命令哦,

    否则会显示一个“模块加载失败,你可能需要一个适合的加载器加载这个文件”的错误,小伙伴们注意一下哈。


    这样,我们就可以在index.html引入包含css和js的bundle.js打包文件了,

    在css文件和js文件中编辑会实时在bundle.js中展现在index.html文件中



    展开全文
  • 打包命令:npm run build,打包后的文件如下:这是因为index.html中引入的css ,js 的路径不对:如下图这是因为webpack打包的时候引入js时使用的是绝对路径导致的,修改webpack打包文件中的配置,在webpack.prod....
  • 一、多个文件打包在一起(打包成一个文件),例如将这两个js文件打包成一个js文件:(多个入口,一个出口)webpack.config.js配置如下:entry入口,数组形式,按顺序打包,output出口,然后运行:npm run build ...
  • webpack4打包多个css的两种方法

    万次阅读 2018-07-23 10:18:38
    1.将css打包js内部 配置文件./conf/webpack.dev.js: const path = require("path"); module.exports = { mode: "development", //打包为开发模式 entry: "./src/main", //入口...
  • webpack把我们的业务模块分开打包

    万次阅读 2016-08-21 20:14:20
    如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js:// entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'],这样就可以全部打包,最终...
  • webpack打包+调试

    千次阅读 2018-10-12 22:55:26
    title: webpack打包+调试 ...categories: 前端 tags: [webpack] password: 本文基于webpack4.20.2,仅讲解webpack打包操作,以及...文章目录一、了解webpack二、开始使用Webpack三、正式创建一个项目四、webpack的运行...
  • 问题使用webpack进行打包时,发现bundle.js竟然有2M。解决办法网上有去除插件、提取第三方库、压缩代码等方法。还有一个比较容易忽略的原因就是开了sourcemap在生产环境中,应使用devtool: false关闭sourcemap后...
  • webpack以及gulp介绍

    万次阅读 2020-02-23 23:19:12
    webpack webpack3和4的区别: 4是零配置的; $npm i webpack -D $npm i webpack -cli -D 就可以在命令行使用webpack命令; 入口文件可以写成字符串,数组或者对象。 写成数组就打包到一起,写成对象会分片打包。 ...
  • 动手写webpack配置--11.混淆js打包

    千次阅读 2019-03-06 15:42:59
    基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境. 项目名webpackDemo; 很时候打出来的包,都不希望被别人解包,解读相关的代码逻辑。因此就出现了代码混淆,加密之类的,目的只有一个,就是加强对...
  • 教你如何使用webpack打包你的项目

    万次阅读 2017-06-25 15:37:10
    webpack是前端开发中比较常用的打包工具之,另外还有gulp,grunt。之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程。
  • webpack 单入口和入口处理方式

    千次阅读 2018-09-18 19:36:48
    所以在app.js中只有一个login结果;所以我们要动态的去处理出口 出口方法: 把filename:下的app.js改成[name].js这样就会按照原文件的名字打包到dist目标文件下; 再到git下输入webpack打包 结果如下: ...
  • 简单地使用webpack进行打包

    万次阅读 2018-07-04 09:49:17
    进行初始化,一路都是选择默认(回车就可以):查看初始化后的文件夹,里面只有一个json文件:4. 接下来装webpacknpm install webpack --save-dev安装完成:查看项目下,发现已经:5.然后用编译器打开当前项目...
  • webpackjs打包后的map文件

    万次阅读 2017-06-30 12:12:36
    类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件
  • webpack学习()——实现简单打包

    千次阅读 2018-04-17 20:29:33
    一、什么是webpack webpack一个前端构建工具,可以帮我们实现js、css、图片的压缩,合并。webpack主要的功能就是前端模块化服务。webpack的核心是一个适用于现代JavaScript应用程序的静态模块打包程序。 当...
  • 最近遇到一个问题,如何打包某个文件夹下的所有js文件。 例如我们想打包src下common中的所有js文件。感谢stack overflow上的大神们的解答,为此将方法记录下来: 方式一:用数组将所有要打包js路径写入。 ...
  • 一个Web项目中 会引入很文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于...
  • 想要打包多个文件,在多个文件下有各个文件的相互调用,如在下例文件下要调用其他文件里的函数 var AnimateDomManage = require("./animatedommanager.js"); var AnimateEditor = require(&...
1 2 3 4 5 ... 20
收藏数 33,614
精华内容 13,445
关键字:

webpack 多个js打包为1个