webpack 不处理的目录 打包 - CSDN
精华内容
参与话题
  • 配置 webpack打包路径

    万次阅读 2018-11-17 15:12:32
    在 src 目录下面 新建一个 webpack.config.js 文件  按照图示 设置 需要打包的文件 ,配置打包后输出到哪个文件及路径  配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下 如果...

     

    在 src 目录下面 新建一个 webpack.config.js 文件 

    按照图示 设置 需要打包的文件 ,配置打包后输出到哪个文件及路径 

    配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下

    如果说 我们想要 我们一修改文件,不用我们手动打包,就想让我们 修改的文件生效

    1、可以在 package.json 文件中配置 dev: webpack-dev-server

    2、然后在终端里面 执行 npm run dev

    会打开一个端口,我们可以直接访问这个端口(默认是8080端口),访问我们的文件

    3、修改以后只要我们修改就会自动进行编译

    注意:使用 wabpack-dev-server 以后需要在我们的html  文件中修改,引入的打包文件路径

       3.1 这是我为使用 webapck-dev-server 的时候 引入 bundle.js 路径

      3.2 这是使用 webapck-dev-server 的时候 引入 bundle.js 路径

    因为使用 webpack-dev-server 帮助我们生成的 bundle.js 并没有存放到实际的 物理磁盘中,而是直接 托管到了 电脑的内存中,所以在项目目录中 // 根本找不到 bundle.js 这个文件,虽然看不到,但是我们可以认为 打包好的文件 是和 dist src node_modules 平级,有一个看不见的 文件bundle.js,这样做的原因就是 (页面渲染块)

    4、如果我们还想 在配置完 webapck-dev-server 的时候,执行npm run dev 自动打开 端口连接

    可以做如下配置

    还可以 给 dev 配置 --hot 这样的话 我们进行文件修改,就会在上次打包好的文件上 打上我们本次修改的补丁,就不用每次都生成一个完整的 打包文件,从而运行会更快

    ps: 还可以通过运行命令 npm install html-webpack-plugin -D 把 html文件也放到 内存中去

    安装好  html-webpack-plugin 这个插件以后,需要在webpack配置文件中 作如下修改:

    二、webpack 打包处理 css类型文件 的步骤方法

    1、在 main.js 中 用import 导入 css 文件路径 我这边的路径是 import  "./src/css/index.css"

    2、导入以后,因为 webpack 不能处理非 JS 类型的文件,所以 需要用 npm i style-loader css-loader -D

    3、去webpack 配置文件中,新增一个module 属性

    并且调用处理的规则是 从右往左 处理,也就是说 先调用 css-loader 去处理匹配到的 css文件

    4、对应的 处理 less 文件,安装 less-loader,不过安装前得先 使用命令  npm i less -D 安装 less,如果不安装less 直接安装会有警告: 

    然后定义匹配规则

    因为 less 也是样式,所以先用 less-loader 处理完以后,必须在调用  'style-loader','css-loader'

    5、对应处理sass 文件,也需要先 使用 npm i node-sass -D 安装 node-sass,然后再安装 npm i sass-loader -D

    对应的咋去匹配 sass 的 rules:

    6、处理 css 文件中的 url 地址:

         webpack 默认是无法处理 css 中的url 地址的

    此时我们需要安装 处理url的 loader ,使用命令 npm i url-loader file-loader -D,安装成功以后,去配置文件配置rules

    更进一步可以 配置 打包图片后的相关参数:

    limit: 设置一个是否将图片打包成 base64 位的临界值

    name: 可以设置 原来的图片经过打包以后,还是保持和原来的名字一样,为了防止重名还可以在图片名字前面加上 哈希值

    7、配置处理 字体文件的 lodaer 

    展开全文
  • 在学习webpack加载图片时,想加载指定目录下的图片时,浏览器报错也就是说, 打包之后这个图片文件找到了, 那么原因出在哪里呢?先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误...

    在学习webpack加载图片时,想加载指定目录下的图片时,浏览器报错


    也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢?

    先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用file-loader来处理. 


    再看下项目根目录结构:通过浏览器的报错信息可以发现, build.js为我们指定的这个图片的地址明显不正确, 

    在默认情况下, 打包过程会将使用到的图片拷贝一份放到output的path指定的目录下, 然而在build.js中引用的图片路径确实整个工程文件的根目录, 因此自然引用不到.


    哪怎么解决呢?

    只要在模板中把图片存放图片的文件路径写对就可以了


    下面图片是引用图片的源代码



    展开全文
  • webpack之输出路径处理

    万次阅读 2018-05-06 15:33:10
    最后留了一个问题待解决正文:紧接上文《 webpack之重新认知babel-loader 》项目目录:执行 npm run build之后,查看dist下面打包结果,简直乱作一锅,我们原本src下目录结构规划的很好啊(¬_¬)!优化dist目录目标...

    前言:

    • 本文演示了如何通过配置webpack.config.js来优化最后build成功的dist目录。
    • 最后留了一个问题待解决


    正文:

    紧接上文《 webpack之重新认知babel-loader 》项目目录:

    执行 npm run build之后,查看dist下面打包结果,简直乱作一锅,我们原本src下目录结构规划的很好啊(¬_¬)!


    优化dist目录

    目标目录结构:


    1、安装插件clean-webpack-plugin。

    它的作用是在每次build之前,清除dist目录。

    $ npm i -D clean-webpack-plugin

    在webpack.config.js中配置clean-webpack-plugin插件:


    2、配置js输出到dist/assets/js目录下:


    3、配置生成的index.html输出目录:

    4、配置图片输出目录


    其中[name]是图片原理的名字,[ext]是之前的后缀名

    5、配置字体输出目录


    执行 npm run build ,输出的dist目录和我们预想的一样。

    6、出现问题

    但是,在浏览器打开dist/index.html文件,发现图片和字体图标都不能正常加载,但是js却正常加载了(html-webpack-plugin的功劳)!


    如何解决?


    展开全文
  • 浅谈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 模块化的体现,输出该模块
    展开全文
  • 文章有点长,希望能够阅读下去,有所帮助。 问题 ...资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。 解决: 找到confi...
  • Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端...
  • webpack打包压缩图片

    万次阅读 2017-07-20 16:47:08
    当我们使用webpack打包的时候,图片往往不会进行压缩处理打包前多大的图片,打包后还是多大的图片。 图片太大,打包出来的文件也比较大,加载也比较慢。为了提高性能,优化处理,图片打包时进行压缩就很有必要了...
  • 教你如何使用webpack打包你的项目

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

    千次阅读 2016-09-07 17:11:13
    创建第一个ES6项目,使用webpack的babel-loader编译
  • webpack中如何使用iconfont字体图标

    万次阅读 2019-07-19 15:01:03
    入坑webpack,开始加载一些图片、js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开...
  • 1、webpack概述:webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装:在安装Webpack之前,我们的本地环境需要支持node.js。安装...
  • webpack之引入css

    千次阅读 2018-05-06 15:35:17
    前言:本文演示了如何打包css文件;涉及到的loader: css-loader、style-loader;css-loader的任务:把css文件作为模块打包style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内...
  • webpack打包后图片显示问题

    千次阅读 2018-05-04 13:22:42
    test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片就单独打包到utils.assetsPath(‘img...
  • 使用webpack合并js文件

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

    千次阅读 2018-03-30 16:53:16
    我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是能直接处理的,需要使用到loader将其转化成javbascript代码片,然后在对其进行处理 对于处理css,需要使用到的loader是:...
  • Webpack打包后体积过大的优化思路

    万次阅读 2017-06-28 14:48:32
    本文综合了几篇不错的文章,整理了处理Webpack打包后体积过大的思路,代码主要引自参考文章中,使用时需要根据Webpack版本做调整。
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用 npm run build 即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件...
  • webpack面试题总结

    万次阅读 2018-11-10 11:49:00
    本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2.webpack的优势 (1) webpack 是...
  • webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法前言很久没有更新关于webpack+vue的内容了。前面承诺过大家告诉大家如何打包到子目录的。由于太忙,也忘记了。今天补充两个知识点给大家。将接口配置...
1 2 3 4 5 ... 20
收藏数 25,803
精华内容 10,321
热门标签
关键字:

webpack 不处理的目录 打包