webpack 前端 运行指令 项目_使用webpack打包前端项目后怎么运行 - CSDN
精华内容
参与话题
  • 最近公司里做vue项目,svn了前端同事的项目代码,装好环境,运行项目(安装步骤随便百度一下,很详细),控制台里报错“‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件,随机百度解决...

    最近公司里做vue项目,svn了前端同事的项目代码,装好环境,运行项目(安装步骤随便百度一下,很详细),控制台里报错“‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件,随机百度解决方法,有的说需要重新装依赖包,有的说扩展用户权限,都做了,但是报错依旧。


    随机自己新建一个vue项目(https://segmentfault.com/a/1190000009871504),发现没有报错,于是可以肯定是svn下来的项目代码有问题,最后将项目里的“node_modules”文件夹删除,然后在cmd中cd到项目目录,依次运行命令:npm install和npm run build,最后运行npm run dev后项目成功运行。




    展开全文
  • 运行webpack命令每次提示安装cli

    千次阅读 2018-07-10 11:49:36
    运行webpack命令每次提示安装cliwebpack-cli 需要全局安装。

    运行webpack命令每次提示安装cli

    webpack-cli 需要全局安装。

    展开全文
  • 各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。 准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。 第一步:使用npm全局安装webpack和vue-...

    近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。

    准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。

    第一步:使用npm全局安装webpack和vue-cli(如果安装速度慢,可以使用cnpm淘宝镜像安装,直接百度就有)

    $ npm install webpack vue-cli -g

    这里写图片描述
    这几行warn是警告,自动忽略即可,这样代表安装成功

    第二步:使用vue init命令创建模板文件(如果这时报错vue不是指定命令,请看后文报错总结)
    vue init 你用的模板工具 项目名称 (这里采用webpack作为模板工具)

    $ vue init webpack sharismSpace-personel

    这里写图片描述
    这样,我们就创建好了一个vue+webpack项目,目录结构如下
    这里写图片描述
    第三步:如果想要运行,请cd到这个目录下,然后npm run dev即可
    这里写图片描述
    然后,浏览器打开对应网址:http://localhost:8080,出现如下画面,恭喜,说明安装成功!
    这里写图片描述

    报错总结:

    一:使用vue init命名报错(vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称…),如下图:
    这里写图片描述
    原因:这是因为第一次安装vue-cli,但是并没有更新到环境变量中导致的,需要我们手动配置一下。
    解决步骤:
    1. 找到系统磁盘中安装npm的根路径,然后查找vue.cmd
    这里写图片描述

    2.右键找到相应的目录,然后将npm根目录添加到系统环境变量中
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    3.添加完成后一路确认,之后重新打开vscode控制台或者powershell,再次输入命令,就好使了。

    展开全文
  • 使用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

    展开全文
  • vue第五天

    万次阅读 2020-01-04 12:38:40
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) ...
  • webpack安装以及环境变量的配置

    万次阅读 2018-03-14 18:58:49
    今天安装现在前端最火的打包工具webpack可谓是猜了不少坑,网上的资料大都如出一辙,但是我运行的时候都除了问题,最后自己设置环境变量解决,废话少说,让我们进入正文: 要安装webpack首先要安装npm,npm在node的...
  • webpack前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具; webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack命令项目根目录中运行npm i ...
  • 目标: (1):使用node.js及其插件,搭建一个可运行前端项目; (2):实现自动部署,热部署; (3):使用代理获取后台数据,实现前后端完全分离;工具: webstorm、Chrome浏览器实现: (1):安装...
  • 前端面试之webpack

    万次阅读 多人点赞 2017-09-28 14:08:46
    还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webpack,就仔细看看,虽然本教程不能让你webpack玩的很6,但是懂操作流程够了。面试你一般问你webpack的原理,...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • 一、介绍 Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如...Webpack前端的一个项目构建工具 基于Node.js开发 因此 若要使用webpack 必须先安装Node.js 借助Webpack这个前端自动化构建工具 可以完美...
  • 使用webpackwebpack-dev-server

    千次阅读 2019-02-04 16:57:19
    webpack前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具; webpack解决什么问题? 合并、压缩、精灵图、图片的Base64编码 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包...
  • 手把手教你使用Webpack打包React项目

    万次阅读 2018-05-10 15:35:49
     webpack是一个前端资源加载/打包工具,前端的常用资源都可以作为一个模块导出,我们在代码中直接引用即可,最后按照我们的配置把代码打包整合起来。先来认识一下webpack的基本配置现在开发搭建开发环境第一步:在...
  • windows下安装nodejs、webpack及打包步骤

    万次阅读 2017-11-30 15:26:05
    1.下载Node.js ... 2.安装Node.js 一路下一步,记住安装路径(此处安装在 D:\...安装完成后运行cmd,执行node -v和npm -v命令查看安装情况。如执行结果如下图,说明安装成功。 (执行完该命令后,nodejs安装目录
  • 前端项目运行

    千次阅读 2020-06-17 14:25:52
    环境:vscode、node.js、cnpm/yarn ...3.运行项目 使用命令启动 cnpm run dev 第一次运行可能出现抱歉情况,如出现,请安装如下全局依赖 cnpm global add webpack-dev-server cnpm global add w.
  • 解决: 运行npm run webpack命令报错问题

    千次阅读 2018-03-19 18:43:25
    解决: 运行npm run webpack报错 问题描述: MacBook-Pro:webpack-demo $ npm run-script webpack webpack-demo@1.0.0 webpack /Users/aaaaaaa/webpack/webpack-demo webpack The CLI moved into a ...
  • Webpack4.x 版本入门指南

    千次阅读 2018-03-29 11:14:24
    本文是基于win环境搭建的webpack,以前的同事写的入门指南是webpack3.0版本,最近想用webpack却发现它已经更新到了4.1.x,于是遇到了几个坑,也为了给想入门webpack的小伙伴提供个方便,重新写一份入门指南。...
  • vue中Webpack的使用

    千次阅读 2019-07-10 15:13:52
    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff ......
  • Webpack安装教程

    千次阅读 2018-08-13 16:43:30
    本章为大家分享webpack4.0后的安装教程,自己刚接触时,网上大部分都是以前的安装教程,在过程真遇到些坑,为了大家不必浪费更多的时间,这里将为大家详细介绍 webpack是什么,它是一个根据模块依赖关系进行静态...
  • 然而,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。 官网:https://cli.vuejs.org/ vue-cli入门 (快速的脚手架-快速搭项目的...) 新建模块 进入目录: 安...
1 2 3 4 5 ... 20
收藏数 14,550
精华内容 5,820
关键字:

webpack 前端 运行指令 项目