webpack 不同环境引入不同文件_webpack ts文件引入jpg文件 - CSDN
精华内容
参与话题
  • VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前言 我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目...

    VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    前言

    我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们可能在测试接口和真实接口之间频繁切换,让人十分恶心。

    因此,我们有必要想办法解决这个问题。

    本文是 Vue2+VueRouter2+webpack 构建项目实战 
    的后续文章。理解本文内容,需要VUE相关技术基础。

    第一步,分别设置不同的接口地址

    首先,我们分别找到下面的文件:

    /config/dev.env.js
    /config/prod.env.js
    • 1
    • 2
    • 1
    • 2

    其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下:

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    好,我们在NODE_ENV下面增加一项,代码如下:

    var merge = require('webpack-merge')
    var prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"//192.168.1.8/api"'
    })
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    然后,我们编辑prod.env.js文件,

    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT: '"//www.baidu.com/api"'
    }
    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4

    好。我们分别设定的路径已经有了。下面就是如何调用的问题了。

    第二部,在代码中调用设置好的参数

    以我们之前的演示代码为例。你自己的项目请根据你自己的情况调整。以下文件和代码仅供参考。

    我们打开src/config/api.js文件,将原来开头的代码

    // 配置API接口地址
    var root = 'https://cnodejs.org/api/v1'
    • 1
    • 2
    • 1
    • 2

    修改为

    // 配置API接口地址
    var root = process.env.API_ROOT
    • 1
    • 2
    • 1
    • 2

    然后就完成了我们的配置工作。最后,重启项目,就能使新配置的接口地址生效了。

    在经过这样的配置之后,我们在运行

    npm run dev
    • 1
    • 1

    的时候,跑的就是测试接口。而我们运行

    npm run build
    • 1
    • 1

    打包项目的时候,打包的是服务器正式接口,我们就不用调来调去得了。

    祝开心!

    本文由 FungLeo 原创,允许转载,但必须保留首发链接。

    展开全文
  • webpack中如何使用iconfont字体图标

    万次阅读 2019-07-19 15:01:03
    入坑webpack,开始加载一些图片、js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont。1.修改css中字体文件路径我把css和字体文件放在同级目录下打开...

    入坑webpack,开始加载一些图片、js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont。


    1.修改css中字体文件路径

    我把css和字体文件放在同级目录下

    这里写图片描述

    打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的

    • 同级目录:直接用文件名
    • 上一级目录:…/

    这里写图片描述

    但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示

    • 同级目录: ./
    • 上一级目录: …/

    这里写图片描述

    2.配置如何加载woff等字体文件

    大家都知道webpack要配置loader,声明如何加载某类文件,所以我们要在config中声明一下

    使用之前要安装url-loader、file-loader

    在webpack的配置文件的loaders中配置

    这里写图片描述

    字体文件最后会以字符的形式保存在css文件中
    这里写图片描述

    展开全文
  • 1、webpack概述:webpack是一款...2、全局安装:在安装Webpack之前,我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。使用如下命令在全局安装webpacknpm install webpack -g3、webpack的使用步骤A...

    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文件中



    展开全文
  • webpack不打包特定的文件

    千次阅读 2019-06-18 14:50:55
    使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址不...

    使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址不一致,所以我们要弄成可配置的,即单独出来一个js文件放我们的接口地址,然后希望该js文件不被打包进去,同时也就希望这个js文件里面的内容不被打包,这样在项目打包后我们也可以对接口进行修改。

    1、在static目录下新建一个js文件来存放我们的接口地址

    image

    image

    上面的apiUrl放置了开发时的接口地址

    2、我们需要把接口地址作为全局变量使用,在项目的根目录下创建.eslintrc.json文件来放置我们的全局变量

    image

    设置为false是说明该变量为可读而不可写的,为true就是可写的

    3、接下来就是在index.html页面使用script标签引入该文件了,不可以使用import或者是require,如果使用了那么文件中的内容在其他模块中使用的时候也会被一起打包进去,所以尽管打包后更改了apiUrl.js里面的内容配置也不会起效果。

    image

    4、最后就可以在其他模块直接使用这个全局变量啦,但是由于加载的顺序问题,我们在其他模块引用这个全局变量的时候,我们插入的这个script标签的内容还没有被加载出来(所以后面打包完后需要更改一下加载顺序,后续讲到)

    image

    用typeof判断该变量是否已经引入了,避免还没引入的时候使用而报错。

    5、打包,打包前我们需要更改一下我们的生产环境(不同于开发环境)的publicPath,避免放到服务器的时候路径不一致

    image

    6、运行npm run build打包后会发现我们的apiUrl会自动的放到static/js文件夹下,不需要我们手动放进去,打包后的文件都放在dist目录下

    image

    手动把引入的文件提到第一个script标签

    7、最后就可以把我们的dist文件夹下的东西放到服务器部署啦,接口地址改变的时候直接修改apiUrl.js里面的内容就可以啦。

    perfect.

     

     

    展开全文
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 强大的webpack-dev-server

    万次阅读 2018-10-24 20:42:32
    万能本地运行环境 webpack-dev-server是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行。 使用情况:解决本地运行跨域 很多框架使用时其实是用了ajax的请求的,在本地...
  • webpack面试题总结

    万次阅读 2018-11-10 11:49:00
    本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2.webpack的优势 (1) webpack 是...
  • webpack打包(二)(含面试)

    千次阅读 2018-06-02 17:25:29
    处理CSS引入csscss-loader提取css文件extract-text-webpack-plugin3.本地开发服务器:webpack-dev-server路径重定向,支持https,浏览器中可以显示编译错误,可以进行接口代理,模块热更新proxy代理远程接...
  • Vue+WebPack+HBuilder 项目记录

    万次阅读 2018-04-04 16:43:39
    Vue+WebPack+HBuilder 项目记录 以前使用过vue+gulp+hbuilder做过app,vue是直接使用script标签引入的。 此次有新项目使用想要手机版与APP一套完成,所以选择使用vue做单页应用,然后使用hbuilder打包但是放入APP...
  • 使用webpack合并js文件

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

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpack的vue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...
  • webpack中output之path和publicPath详解

    万次阅读 2018-06-09 11:41:56
    path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录,指定资源文件引用的目录 ,打包后浏览器访问服务时的 url 路径中通用的一部分。区别:path是webpack所有文件的输出的...
  • 利用webpack实现对html文件的热更新

    千次阅读 2018-04-11 19:35:55
    webpackwebpack-dev-server是一个简单的web服务器,可以帮助我们实现代码的热更新,即在实际开发中只需保存修改完后的代码,不用手动刷新页面就可以看到效果。在使用webpack-dev-server时,会发现在对js、css文件...
  • webpack面试题汇总

    千次阅读 2018-11-21 09:56:24
    这是webpack系列文章的十一篇,整理了一些关于webpack的面试题,对之前的内容做一次总结 webpack官网https://webpack.js.org/ webpack中文网https://www.webpackjs.com/ 什么是webpack webpack是一个打包模块化...
  • 一、webpack使用ES6语法,第三方js可以引入通过import,可以通过npm 配置到项目中或者直接下再加入项目js文件中 首先无论require还是import,都不是webpack的发明,它们是已经存在于世的不同的模块化规范(目前都不...
  • Webpack打包后体积过大的优化思路

    万次阅读 2017-06-28 14:48:32
    本文综合了几篇不错的文章,整理了处理Webpack打包后体积过大的思路,代码主要引自参考文章中,使用时需要根据Webpack版本做调整。
  • 关于这个问题着实让人头疼。对于大型的项目而言,配置太过复杂了。以下是我的需求场景及【解决...在打包的时候一定是pro环境,这个打包并不是单纯的webpack打包。而是把程序打包成 PC应用【electron】。 原本DEMO的...
  • Webpack搭建完整Typescript开发环境

    千次阅读 2017-10-22 08:51:58
    提供开发本地服务器以及自动刷新,到转为生产环境代码的编译,压缩,混淆代码以及打包,还是交给一些第三方工具的吧,对,我说的就是Typescript代替Javascript进行前端开发,第三方工具就说的是神器webpack。...
  • 在vue项目中正确的引入jquery

    万次阅读 热门讨论 2017-07-03 13:45:34
    在vue项目中正确的引入jquery
  • Webpack学习笔记 webpack介绍和安装

    万次阅读 2019-09-05 23:10:28
    * 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理 * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源 官方文档:https://www.webpackjs.com/ 笔记: Webpack 本身只能...
1 2 3 4 5 ... 20
收藏数 20,637
精华内容 8,254
关键字:

webpack 不同环境引入不同文件