精华内容
下载资源
问答
  • webpack打包访问不到json文件

    千次阅读 2017-12-03 12:55:00
    在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败。 二、预期结果 能正常获取数据,渲染页面。 三、问题...

    一、问题描述

    在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败。

    二、预期结果

    能正常获取数据,渲染页面。

    三、问题分析

    因为webpack没有把json文件打包到dist目录,所以not found,即便加了json-loader也无用。

    四、解决方案

    手动把ajax数据目录拷贝到dist目录,先让页面完整出来。通常ajax数据是后端给前端一个接口地址,前端去访问的,所以这里,前端不必想着打包json文件,还弄什么压缩,name哈希。

    转载于:https://www.cnblogs.com/camille666/p/after_webpack_visit_jsonfile.html

    展开全文
  • webpack打包原理和manifest文件分析

    万次阅读 2017-08-01 11:38:08
    分析了webpack打包的原理,并解读了webpack打包生成的代码和其工作机制

    打包工具要解决的问题:

    • 文件依赖管理 梳理文件之间的依赖关系
    • 资源加载管理 处理文件的加载顺序(先后时机)和文件的加载数量(合并、嵌入、拆分)
    • 效率与优化管理 提高开发效率,完成页面优化

    webpack是一个现代Javascript应用的打包工具。它采用tool+plugins的结构。tool提供基础能力,即文件依赖管理和资源加载管理;在此基础上通过一系列的plugins来丰富打包工具的功能。

    在webpack里,所有的文件都是模块。但是webpack只认识js模块,所以要通过一些loader插件把css、图片等文件转化成webpack认识的模块。

    在webpack打包的文件中,模块是以模块函数来表示的。通过把文件转化成模块函数就可以控制模块的运行时间。即加载完成后不会立即执行,等到调用模块函数的时候才会执行。

    webpack的工作步骤如下:

    1. 从入口文件开始递归地建立一个依赖关系图。
    2. 把所有文件都转化成模块函数。
    3. 根据依赖关系,按照配置文件把模块函数分组打包成若干个bundle。
    4. 通过script标签把打包的bundle注入到html中,通过manifest文件来管理bundle文件的运行和加载。

    打包的规则为:一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的bundle。

    除了这些bundle外,还有一个特别重要的bundle,就是manifest.bundle.js文件,即webpackBootstrap。这个manifest文件是最先加载的,负责解析webpack打包的其他bundle文件,使其按要求进行加载和执行。

    打包代码解析

    首先分析一下manifest文件。

    它包含三个主要变量,modules、installedModules和installedChunks。

    modules对象保存的是所有的模块函数。模块函数是webpack处理的基本单位,对应打包前的一个文件,形式为function(module, webpack_exports, webpack_require) {…}。所有的模块函数的索引值是连续编码的,如果第一个bundle里的模块函数的索引是0-7,第二个bundle里的模块函数的索引就从8开始,从而保证索引和模块函数一一对应。

    installedModules对象保存的是模块对象。模块对象是运行模块函数得到的对象,是标准的Commonjs对象,其属性主要有模块id和exports对象。webpack的运行就是指执行模块函数得到模块对象的过程。

    installedChunks保存的是异步加载对象的promise信息,结构为[resolve, reject, promise]。主要是用来标记异步加载模块。用promise便于异步加载模块的全局管理,如果加载超时就可以抛出js异常。

    包括三个主要函数webpackJsonpCallback,webpack_requirewebpack_require.e

    webpackJsonpCallback(chunkIds, moreModules, executeModules){…}是bundle文件的包裹函数。bundle文件被加载后就会运行这个函数。函数的三个参数分别对应三种模块。chunkIds指的是需要单独加载的模块的id,对应installedChunks;executeModules指的是需要立即执行的模块函数的id,对应modules,一般是入口文件对应的模块函数的id;moreModules包括该bundle打包的所有模块函数。webpackJsonpCallback先把模块函数存到modules对象中;然后处理chunkIds,调用resolve来改变promise的状态;最后处理executeModules,把对应的模块函数转化成模块对象。

    webpack_require(moduleId)通过运行modules里的模块函数来得到模块对象,并保存到installedModules对象中。

    webpack_require.e(chunkId)通过建立promise对象来跟踪按需加载模块的加载状态,并设置超时阙值,如果加载超时就抛出js异常。如果不需要处理加载超时异常的话,就不需要这个函数和installedChunks对象,可以把按需加载模块当作普通模块来处理。

            (function(modules) { // webpackBootstrap
                // modules存储的是模块函数
                // The module cache,存储的是模块对象
                var installedModules = {};
                // objects to store loaded and loading chunks
                // 按需加载的模块的promise
                var installedChunks = { 2:0 };
                // The require function
                // require的功能是把modules对象里的模块函数转化成模块对象,
                // 即运行模块函数,模块函数会把模块的export赋值给模块对象,供其他模块调用。
                function __webpack_require__(moduleId) {
                    // Check if module is in cache
                    if(installedModules[moduleId]) {
                        return installedModules[moduleId].exports;
                    }
                    // 下面开始把一个模块的代码转化成一个模块对象
                    // Create a new module (and put it into the cache)
                    var module = installedModules[moduleId] = {
                        i: moduleId,
                        l: false, //是否已经加载完成
                        exports: {} //模块输出,几乎代表模块本身
                    };
                    // Execute the module function,即运行模块函数,打包后的每个模块都是一个函数
                    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
                    // Flag the module as loaded
                    module.l = true;
                    // Return the exports of the module
                    return module.exports;
                }
                // install a JSONP callback for chunk loading
                var parentJsonpFunction = window["webpackJsonp"];
                window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
                    var moduleId, chunkId, i = 0, resolves = [], result;
                    // 遍历chunkIds,如果对应的模块是按需加载的模块,就把其resolve函数存起来。
                    for(;i < chunkIds.length; i++) {
                        chunkId = chunkIds[i];
                        if(installedChunks[chunkId]) {
                            // 是按需加载的模块,取出其resolve函数
                            resolves.push(installedChunks[chunkId][0]);
                        }
                        installedChunks[chunkId] = 0; //该chunk已经被处理了
                    }
                    //遍历moreModules把模块函数存到modules中
                    for(moduleId in moreModules) {
                        if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
                            modules[moduleId] = moreModules[moduleId];
                        }
                    }
                    // 执行resolve函数,一般是__webpack_require__函数
                    while(resolves.length) {
                        resolves.shift()();
                    }
                    //遍历moreModules把模块函数转化成模块对象
                    if(executeModules) {
                        for(i=0; i < executeModules.length; i++) {
                            result = __webpack_require__(__webpack_require__.s = executeModules[i]);
                        }
                    }
                    return result;
                };
                __webpack_require__.e = function requireEnsure(chunkId) {
                    var installedChunkData = installedChunks[chunkId];
                    // 模块已经被处理过(加载了模块函数并转换成了模块对象),就返回promise,调用resolve
                    if(installedChunkData === 0) {
                        return new Promise(function(resolve) { resolve(); });
                    }
                    // 模块正在被加载,返回原来的promise
                    // 加载完后会运行模块函数,模块函数会调用resolve改变promise的状态
                    if(installedChunkData) {
                        return installedChunkData[2];
                    }
                    // 新建promise,并把resolve,reject函数和promise都赋值给installedChunks[chunkId],以便全局访问
                    var promise = new Promise(function(resolve, reject) {
                        installedChunkData = installedChunks[chunkId] = [resolve, reject];
                    });
                    installedChunkData[2] = promise;
                    var head = document.getElementsByTagName('head')[0];
                    var script = document.createElement('script');
                    script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
                    var timeout = setTimeout(onScriptComplete, 120000);
                    script.onerror = script.onload = onScriptComplete;
                    function onScriptComplete() {
                        script.onerror = script.onload = null;
                        clearTimeout(timeout);
                        var chunk = installedChunks[chunkId];
                        if(chunk !== 0) { //没有被处理
                            if(chunk) {// 是按需加载模块,即请求超时了
                                chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
                            }
                            installedChunks[chunkId] = undefined;
                        }
                    }
                }
            })([]);

    然后分析普通的bundle文件。

    所有的代码都包裹在webpackJsonp函数中。

    函数的第二个参数是一个数组,包含了打包的所有文件对应的模块函数。模块函数的标准形式为function(module, webpack_exports, webpack_require) {…}。模块函数里的代码是打包前的文件的代码做了相应的替换得到的。比如替换require为webpack_require,替换以前的路径为新的路径,替换import为webpack_require.e().then()等。模块函数通过webpack_exports[“a”] = printMe之类的语句输出模块的exports。通过模块函数,把amd、cmd、commjs模块都统一为webpack的模块。

            webpackJsonp([1],[
                /* 0 */
                (function(module, exports, __webpack_require__) {
                    module.exports = __webpack_require__.p + "695368065150e6c5683c6642951c74ce.jpg";
                }),
                /* 1 */
                (function(module, __webpack_exports__, __webpack_require__) {
                    "use strict";
                    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                    // 加载依赖模块
                    var __WEBPACK_IMPORTED_MODULE_0__style_css__ = __webpack_require__(2);
                    ...
                    var __WEBPACK_IMPORTED_MODULE_1__katong_jpg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__katong_jpg__);
                    ...
                    var __WEBPACK_IMPORTED_MODULE_2__say_js__ = __webpack_require__(7);
                    // welcome.js文件里的代码
                    var elDiv1 = document.createElement('div');
                    ...
                    // 把原来的url替换成了上面加载的图片
                    elImg.src = __WEBPACK_IMPORTED_MODULE_1__katong_jpg___default.a;
                    ...
                    // 把import替换成用promise实现的__webpack_require__.e()来完成异步按需加载
                    btn.onclick = function() {
                        __webpack_require__.e(0).then(__webpack_require__.bind(null, 8)).then(m => {
                            m.default();
                        });
                    };
                    // 把原来的say()函数替换成上面加载的函数
                    Object(__WEBPACK_IMPORTED_MODULE_2__say_js__["a"])();
                }),
                /* 2 */
                (function(module, exports, __webpack_require__) {
                    ...
                }),
                ...
                /* 6 */
                (function(module, exports) {
                    ...
                }),
                /* 7 */
                (function(module, __webpack_exports__, __webpack_require__) {
                    // 模块输出
                    __webpack_exports__["a"] = printMe;
                    function printMe() {
                        ...
                    }
                })
            ],[1]);

    实例

    上面分析对应的代码在https://github.com/lancewux/webpack-analyze中,通过运行工程中的代码,可以更好地理解上面的分析

    下面是webpack配置时的一些概念

    Entry

    入口文件是webpack建立依赖图的起点。

    Output

    Output配置告诉webpack怎么处理打包的代码。

    Hot Module Replacement

    热模块替换功能可以在不刷新所有文件的情况下实现单独跟新某个模块。

    Tree Shaking

    去除无用代码,比如某个js文件里的函数并没有被使用,这段函数代码在打包时将会被去掉。

    Code Splitting

    代码拆分,实现的方式有三种

    • Entry Points 手动把代码分成多个入口
    • Prevent Duplication 使用插件CommonsChunkPlugin提取公共代码块
    • Dynamic Imports 用import函数动态动引入模块

    Lazy Loading

    懒加载或者按需加载,属于Code Splitting的一部分

    Loaders

    webpack把所有文件都当成模块对待,但是它只理解Javascript。Loaders把这些webpack不认识的文件转化成模块,以便webpack进行处理。

    plugins

    插件一般用来处理打包模块的编译或代码块相关的工作。

    The Manifest

    webpack manifest文件用来引导所有模块的交互。manifest文件包含了加载和处理模块的逻辑。

    当webpack编译器处理和映射应用代码时,它把模块的详细的信息都记录到了manifest文件中。当模块被打包并运输到浏览器上时,runtime就会根据manifest文件来处理和加载模块。利用manifest就知道从哪里去获取模块代码。

    展开全文
  • 使用webpack打包 使用打包后的js文件 入口和出口 局部安装webpack package.json中定义启动 实践 定义: 引用: 因为CommonJS规范的代码浏览器是认识的,所以需要借助webpack对上述代码进行转换: 查看结果...

    目录

    在这里插入图片描述

    webpack介绍

    在这里插入图片描述

    前端模块化和打包概念介绍

    在这里插入图片描述

    webpack和grunt/gulp的对比

    在这里插入图片描述

    webpack和nodejs的关系

    在这里插入图片描述

    webpack安装

    在这里插入图片描述

    webpack使用示例

    环境搭建

    在这里插入图片描述

    使用webpack打包

    在这里插入图片描述

    使用打包后的js文件

    在这里插入图片描述

    入口和出口

    在这里插入图片描述

    局部安装webpack

    在这里插入图片描述

    package.json中定义启动

    在这里插入图片描述

    实践

    定义:
    在这里插入图片描述
    引用:
    在这里插入图片描述
    因为CommonJS规范的代码浏览器是不认识的,所以需要借助webpack对上述代码进行转换:
    在这里插入图片描述
    查看结果:
    在这里插入图片描述
    代码内容:
    在这里插入图片描述
    在index.html中引用:
    在这里插入图片描述
    浏览器访问index.html:
    在这里插入图片描述
    兼容es6和CommonJS规范:
    在这里插入图片描述
    配置webpack.config.js:
    在这里插入图片描述
    配置完成之后只需执行webpack命令即可,不需要指定入口和出口参数。
    package.json中配置npm run buildwebpack进行绑定:

    在这里插入图片描述
    npm install webpack@3.6.0 --save-dev
    在这里插入图片描述

    loader的使用

    什么是loader

    在这里插入图片描述

    css文件打包

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    main.js中依赖css文件:
    在这里插入图片描述
    仅写上面的会报错,需要安装对应的loader。
    webpack中文官网(国内人进行的翻译):
    在这里插入图片描述
    安装,配置,run:
    在这里插入图片描述
    css-loader只负责加载,不会渲染css样式到HTML页面,需要借助style-loader来实现:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • webpack打包抽离项目配置文件

    千次阅读 2018-04-27 18:46:45
    项目部署不同的服务器上,ip地址不同,那么后端服务的地址也会跟着变化,前端不得更改访问后台服务的地址,然后再次打包发布。如果连本地的服务调试,不得在开发环境和发布环境中服务地址不断的切换,实在是...

          工作中很多项目采用的是前后端分离的模式开发的,而且前端代码会打包发布。项目部署到不同的服务器上,ip地址不同,那么后端服务的地址也会跟着变化,前端不得不更改访问后台服务的地址,然后再次打包发布。如果连本地的服务调试,不得不在开发环境和发布环境中服务地址不断的切换,实在是麻烦。

           本文提供一种抽离配置文件的思路,来改善上面的情况。前端采用的是webpack打包工具,后台是nodejs服务:

            首先,把服务配置文件引入到项目中:

                

              配置文件跟index.html文件放在统计目录,并在index.html中引入:

                

              配置文件:

                

            然后,把前端访问后端服务地址改成可配置的形式:

                

            最后,可以根据服务的真是地址直接更改配置文件中的服务ip了:

                打包过后,真是发布的前端请求服务地址:

                

            我们可以看到虽然项目中给的默认的开发环境下的服务地址,但是打包过后运行真正访问的服务是从外部文件读取的配置地址,这样就能根据服务地址的不同,去动态配置相应的后端访问地址了。

            如有错误,请指正;

                

    展开全文
  • 打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进行读写操作 const fs = require('fs'); // 访问内置的插件 const ...
  • Webpack打包

    2020-11-19 17:10:20
    Webpack打包
  • 关于webpack打包文件

    2019-03-26 19:45:05
    dist是webapck打包文件的输出目录 src是文件目录 webpack.config.js是webpack的配置文件 webpack.config.js const path = require('path'); module.exports = { entry: './src/app.js', //输出路径 output: { ...
  • 如果我们直接将我们前段代码放Tomcat下的webapps/中的话,我们的 找到这个文件
  • 利用webpack打包其它资源文件

    千次阅读 2018-11-09 22:01:38
      webpack除了能够打包css资源文件外,其还可以打包众多的其它类型的文件。   这里为了减少重复代码的编写,所以说此处是在上一篇文章中代码的基础上所做的修改,上一篇文章的地址如下: 利用webpack中的...
  • webpack 文件打包

    2021-06-07 22:12:32
    使用webpack打包文件 要打包文件,首先我们需要初始化一个项目,前面我们已经创建好了一个 xkd_webpack 的项目,并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules ...
  • 此文介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档。 1.配置webpack.config.js 将output.publicPath改成上传的cdn地址, 例(对应上面上传配置): publicPath: ...
  • 通过Vue渐进式框架写了一个项目,项目写完后,通过npm run bulid 生成上线文件dist。但是在运行npm run bulid这条命令的 时候居然报错, ...现在通过webpack已经把所有文件进行整合一起了。 你
  • webpack.config.js: plugins: [ //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', chunks: Object.keys(entries), minChu...
  • webpack 打包

    2018-12-27 11:17:41
    webpack 中每个模块有一个唯一的 id,是从 0 开始递增的。 整个打包后的 bundle.js 是一...识别入口文件,识别模块依赖,来打包代码。webpack做的就是分析代码,转换代码,编译代码,输出代码 Webpack的两个最核心的...
  • 然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 loader 来去处理,打包css文件 首先我们先新建...
  • 解析webpack 打包文件分析

    千次阅读 2019-04-26 21:29:12
    webpack 用于编译 javascript 模块, 可以把文件格式编译成我们...只是提供了一个打包机制, 对于各类文件打包处理需要使用相对应的 预处理模块 loader 来处理, 作为一种机制 webpack&...
  • webpack打包本地访问显示路径错误,解决方法修改config文件中index.js文件 build:{  assetsPublicPath: './', } 转载于:https://www.cnblogs.com/tw6668/p/10437709.html
  • 方案: 1.在 config-&gt;index.js里面,如下修改 2. 在build-&gt;utils.js里面修改如下: 1、图片资源放在 assets-&gt;img文件夹下面 img标签引入图片 &...background: url...
  • 最近接到一个需求,因为确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改。因此,需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports = { ...
  • 在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用 npm run build ... 即可打包发布生产文件打包后的文件 ...可以看到使用url-loader处理...但我们会发现发布后,会存在字体文件不到的问题,查看css...
  • webpack 打包后的文件如下,省略中间部分逻辑代码,可以看到是一个自执行函数,传入了一个对象,该对象的键 ./src/index.js 和 ./src/title.js 都是文件路径,值为导出的模块。 // webpackBootstrap (function ...
  • webpack打包

    2018-08-17 17:28:16
    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有...
  • 解决webpack打包文件过大的问题

    千次阅读 2017-04-12 18:01:49
    webpack 把我们所有的文件打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用...
  • 打包sample,想在打包后的文件目录下打开页面 比如: localhost:3001/ 是默认页面, 打包sample 5, 这样我输入 localhost:3001/5/ 才能打开页面,但是现在我输入 localhost:3001/就能打开页面了 原因 webpack...
  • 一晃,用vue两个多月了,在用vue.js写单页面应用时,随着项目的进展,出现打包后的JavaScript包越来越大,影响页面加载。我们都知道图片的懒加载。当图片出现在视口时,我们加载这张图片。那么我们是不是可以...
  • Vue项目webpack打包部署服务器

    万次阅读 热门讨论 2017-06-05 22:01:35
    Vue项目webpack打包部署服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。必须要配置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,837
精华内容 6,734
关键字:

webpack打包访问不到文件