webpack 对应node 版本_webpack与webpack-dev-server版本对应 - CSDN
精华内容
参与话题
  • webpack安装以及环境变量的配置

    万次阅读 2018-03-14 18:58:49
    今天安装现在前端最火的打包工具webpack可谓是猜了不少坑,网上的资料大都如出一辙,但是我运行的时候都除了问题,最后自己设置环境变量解决,废话少说,让我们进入正文: 要安装webpack首先要安装npm,npm在node的...

      今天安装现在前端最火的打包工具webpack可谓是猜了不少坑,网上的资料大都如出一辙,但是我运行的时候都除了问题,最后自己设置环境变量解决,废话少说,让我们进入正文:

      要安装webpack首先要安装npm,npm在node的安装包中已经默认存在,所以我们只需要安装node,安装node去nodejs官网download,然后傻瓜式安装即可,注意自己选择的路径。

      如果在cmd运行框中输入npm -v 显示版本则表示npm已经装好


     注意:有时候安装npm会出现运行完命令后卡住的情况,这时候需要删除  用户/Administrator/下的.npmrc文件即可。

    这时候我们开始设置npm的安装目录,我设置的是在D盘下:

    npm config set prefix  "D:\nodejs\node_global"

    npm config set cache "D:\nodejs\node_cache"

    我看到的关于webpack安装的博客中很多都把prefix设置错了,这个要注意

    上面一个是设置安装目录,一个是设置缓存安装目录,

    安装webpack:npm install webpack -g

    安装完成后会显示上面的式样,

    这时候webpack会安装都上面我设置的目录下,既 D:\nodejs\node_global的目录下,此时我进入目录下运行webpack是会出现一下问题:


    因为我安装的是新版本的webpack,新版本webpack安装的时候必须要webpack-cli,然后我们继续安装:

    安装webpack-cli:npm install webpack-cli -g大笑


    安装完成后我进入webpack所在的目录运行:

    此时在webpack所在的目录下能成功运行,但是当我到最外层进行安装的时候显示webpack不是外部命令

    这时候我们设置环境变量,将webpack所在的目录加到path环境变量中,

    与之前你所设置的下载目录对应即可,

    最后运行结果

    :

    几个小时过去了,经过这几个小时的安装,也学到了很多,赶快进入下一步的学习咯~大笑



    展开全文
  • 早上遇到一个问题,项目有至少5个版本,希望通过给打包命令加一个参数就能打包对应版本。 process.env配置生产环境 在/config/目录下有prod.env.js、dev.env.js、test.env.js这三个分别是生产环境、开发环境、...

    早上遇到一个问题,项目有至少5个版本,希望通过给打包命令加一个参数就能打包对应版本。

    process.env配置生产环境

    在/config/目录下有prod.env.js、dev.env.js、test.env.js这三个分别是生产环境、开发环境、测试环境的配置。
    在任何文件里都能简单的用下面代码获取到配置

    var NODE_ENV = process.env.NODE_ENV;

    所以我想到了可以通过配置一个process.env.branch 打包出不同版本

    module.exports = {
      NODE_ENV: '"production"',
      BRANCH_ENV:'"base"'
    }

    cross-env修改生产环境变量

    我想要的最终效果是npm run build:base 打包对应版本
    cross-env能跨平台地设置及使用环境变量

    npm安装

    npm i --save-dev cross-env

    修改prod.env.js,在配置文件里接收BRANCH_ENV 的值

    module.exports = {
      NODE_ENV: '"production"',
      BRANCH: JSON.stringify(process.env.BRANCH_ENV) || '"base"'
    }

    在npm脚本(多是package.json)里这么配置

    {
      "scripts": {
        "build:base": "cross-env BRANCH_ENV=testmybranch webpack --config build/webpack.config.js"
      }
    }

    运行npm run build:base,这样NODE_ENV便设置成功,无需担心跨平台问题

    测试成功方法

    在任何页面使用console.log(process.env.BRANCH_ENV) 成功打印出testmybranch

    展开全文
  • 前言 入门前端的坑也很久了,以前很多大小项目,前端都是传统式开发,一直在重复造轮子;...但是对webpack\npm\node\nodejs这几个在前端模块化中的高频词总是傻傻分不清,不知道他们之间的具体关系,今天花了...

    前言

    入门前端的坑也很久了,以前很多大小项目,前端都是传统式开发,一直在重复造轮子;接触VUE后,对vue-cli有了解后,仅仅知道vue-cli是一个vue项目的脚手架,可以快速的构建一个vue的基于npm的模块化项目,vue内部的打包机制其实还是借助webpack;但是对webpack\npm\node\nodejs这几个在前端模块化中的高频词总是傻傻分不清,不知道他们之间的具体关系,今天花了些功夫查阅了网上大神的回答和官方教程给出的解释写一篇小白文,总结一下这几个概念或者说高频词汇之间的关系

    what is webpack?

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

    什么意思呢?看下图,从菜鸟教程上盗的图

    webpack是一个工具,这个工具可以帮你处理好各个包/模块之间的依赖关系(modules with dependencies),并将这些复杂依赖关系的静态文件打包成一个或很少的静态文件,提供给浏览器访问使用;除此之外,webpack因为可以提高兼容性,可以将一些浏览器尚不支持的新特性转换为可以支持格式,进而减少由新特性带来的浏览器的兼容性问题

    好,我们通过介绍,我们有个概念,webpack是一个打包工具,可以帮你把你的项目这里的项目其实就是指通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源

    what is npm?

    介绍了webpack,我们可能会疑问,我的JS,CSS,HTML文件分开写,挺好的呀,为什么要使用webpack工具,进行复杂的各项配置。在传统前端开发模式下,我们确实是按照JS/CSS/HTML文件分开写的模式就可以,但是随着前端的发展,社区的壮大,各种前端的库和框架层出不穷,我们项目中可能会使用很多额外的库,如何有效管理这些引入的库文件是一个大问题,而且我们知道基于在HTML中使用<script>引入的方式,有两个弊端,一个是会重复引入,二是当库文件数量很多时管理成为一个大难题。
    面对这样的局面,为了简化开发的复杂度,前端社区涌现了很多实践方法。模块化就是其中一项成功实践,而npm就是这样在社区 其实就是node社区中产生的

    npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
    npm 由三个独立的部分组成:

    • 网站
    • 注册表(registry)
    • 命令行工具 (CLI)

    网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。
    注册表 是一个巨大的数据库,保存了每个包(package)的信息。
    CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

    这是npm的官方网站给出的介绍,一般来说提起npm有两个含义,一个是说npm官方网站,一个就是说npm包管理工具。npm社区或官网是一个巨大的Node生态系统,社区成员可以随意发布和安装npm生态中的包,也就是不用在重复造轮子了,别人造好了,你直接安装到你的项目中就可以使用,但是因为前面说了,当包引入数量很多时管理就成为了一个问题,这个就是npm为开发者行了方便之处,npm已经为你做好了依赖和版本的控制,也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来,进而关注你的业务而不是库的管理。

    而webpack就是将你从npm中安装的包打包成更小的浏览器可读的静态资源,这里需要注意的是,webpack只是一个前端的打包工具,打包的是静态资源,和后台没有关系,虽然webpack依赖于node环境

    what is node or nodejs?

    其实node和nodejs两个概念没有太大差别,我个人认为唯一的区别就是,人们说起node的时候语境更多的是再说node环境,而说nodejs时更多的是在说node是一门可以提供后端能力的技术。本质上来说,node就是nodejs,nodejs就是node
    nodejs

    简单的说 Node.js 就是运行在服务端的 JavaScript。
    Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

    node环境基于V8引擎提供了一种可以让JS代码跑在后端的能力,这就是node。其实这里的node本身和我们这篇讲的前端模块化没啥关系。但是因为npm是产生与node社区,node中也是通过npm来加载模块的,所以有必要说一下他们之间的关系。

    npm 是 Node.js 官方提供的包管理工具,他已经成了 Node.js 包的标准发布平台,用于 Node.js 包的发布、传播、依赖控制

    webpack npm node之间关系?

    • webpack是npm生态中的一个模块,我们可以通过全局安装webpack来使用webpack对项目进行打包;
    • webpack的运行依赖于node的环境,没有node是不能打包的,但是webpack打包后的项目本身只是前端静态资源和后台没有关系,也就是说不依赖与node,只要有后台能力的都可以部署项目
    • npm是于Node社区中产生的,是nodejs的官方包管理工具,当你下载安装好node的时候,npm cli就自动安装好了
    • 正是因为npm的包管理,使得项目可以模块化的开发,而模块化的开发带来的这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就是webpack工具存在的意义

    做个引流?

    博主最近开了一个微信公众号,以全栈技术为初衷,里面会分享我自己写的认为比较好的原创文章,博客会部分同步,感谢关注!
    在这里插入图片描述

    展开全文
  • 用npm离线安装webpack

    千次阅读 2017-08-17 15:32:23
    离线安装webpack


    最近在弄公司的持续集成平台,有个模块是webpack打包的,官方的安装方式npm install webpack, 但lab的机器没法连接外网,而且防火墙控制很严,连接办公室的proxy也不行。所以只能考虑离线安装的方式。方案是,找个可以连接外网的机器,安装好 node.js,通过npm install -g webpack@1.14.0 来安装,在 Linux下,默认安装好的包在/usr/lib/node_modules/,  copy 整个webpack目录到离线的机器即可。 阿里云连接默认的npm仓库估计连接不上,好几分钟没有进度。所以先设置下npm 国内仓库地址。

    npm config set registry="http://r.cnpmjs.org"
    npm install -g webpack@1.14.0

    如果copy到离线机器,执行webpack -p 还是无法找到对应包,做下link即可。

    比如 npm link webpack

        npm link style-loader


        话说公司lab的服务器防火墙控制太严了,想试验些东西真是太麻烦了,我自己花钱在阿里云申请了个虚拟主机,以后想试验什么东西就很方便了,离线安装一些东西真是太麻烦了。

    展开全文
  • 安装node.js和webpack

    千次阅读 2018-06-05 12:05:51
    1.安装1.1安装node.js1.1.1安装及测试找到官网下载相对应版本进行安装,如图所示(官网链接): 下载直接进行安装,其中安装目录最好手动选取,而且路径当中最好不要存在空格以及汉字,经测试后面执行命令时,...
  • 我看了网上的 一些解决方案,说是webpack版本不对,但我按照提示操作后依然不行; 要先确认是否安装了webpack-dev-server,如果没有安装,安装便可以解决; 粗暴的解决方案是删除node_modules,重新npm install -g...
  • ES6+React+Webpack初步构建项目流程

    千次阅读 2016-04-21 20:16:38
    第一步:webpack是一个基于node的项目,我们使用命令行对webpack进行全局的安装 npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在...
  • 刚开始遇到webpack和babel的版本不兼容,之后使用webpack-dev-server搭建服务器遇到安装的webpackwebpack-dev-server版本不兼容的问题。作为一名前端小白的我表示心很累。 现象:安装webpack之后运行正常,再安装...
  • webpack通过npm淘宝镜像安装

    千次阅读 2017-05-23 10:37:20
    安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。 ...
  • 彻底理解并解决 'webpack' ...在安装 npm 包模块的时候,不管是 Webpack 、React 还是 Vue,都需要全局安装,即执行 npm install webpack -g 或者 npm install @vue/cli -g,否则在使用命令(比如查看版本,webpac...
  • Vue学习笔记之Webpack简介及安装

    千次阅读 多人点赞 2020-07-26 13:53:49
    -g是全局安装(还有局部安装),@3.6.0 指定版本 PS:必须依赖Node.js环境,npm命令管理各种依赖包。 npm install -g cnpm --registry=http://registry.npm.taobao.org 安装淘宝镜像,再通过cnpm来安装。 然后...
  • 安装webpack4.0与webpack-cli的详解

    万次阅读 2020-06-23 09:57:10
    安装webpack真的不难,甚至很简单,大家要有信心 一、首先最好去安装最新版的node.js,windows平台需要去官网下载最新的安装包去安装,命令是没有软用的。 二、本地安装 打开要操作的项目目录的终端,可以直接...
  • 背景环境:1、并没有全局安装webpackwebpack-cli 2、项目没有安装其他模块 1、运行“npm install webpack webpack-cli -D”安装webpackwebpack-cli包到项目。版本如下: 2、项目根目录下创建webpack....
  • 今天再重新配置老项目node打包环境的时候遇到了一个问题。 在打包的时候报: TypeError: Cannot read property 'compilation' of...很明显,这是node一些包的版本对应不上的问题。。。 1、首先定位到uglifyjs-web...
  • 出现这个错误时,百度和谷歌中都搜索不出个所以然出来,后来看了一下webpack官网,说建议安装node最新版本: 前提条件 在开始之前,请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LT...
  • Webpack学习笔记 webpack介绍和安装

    万次阅读 2019-09-05 23:10:28
    * Webpack是一个模块打包器(bundler)。 * 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理 * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源 官方文档:...
  • 小白webpack进行nodejs 前端打包配置

    万次阅读 2018-08-03 18:37:27
    写这篇文章的起因是,最近在github上弄了个HA源码,毫无头绪,也没有说明环境要怎么搭,好了,自己摆弄吧,我看到有py文件,第一感觉就是最有可能是py搭建的项目,正好我有pycharm环境,就用pycharm打开,打开后,要...
  • webpack进阶之loader篇解决如下:源webpack.config.js中如下: devServer: { historyApiFallback: true, hot: true, inline: true, progress:true },
  • 首先先说正确的操作步骤吧!... cmd或者node.js command prompt或者git bash中操作如下命令,这里我用的是git bash npm install webpack -g npm install webpack --save-dev 第二条命令是 npm install webpack --sa
  • 最新vue-cli 2.9.1的webpack存在问题

    万次阅读 2017-11-18 11:33:32
    vue-cli 2.9.1
1 2 3 4 5 ... 20
收藏数 20,730
精华内容 8,292
关键字:

webpack 对应node 版本