打包HTML文件基础之webpack配置
之前项目用的VUE脚手架创建创建并打包发布的,最近新启动的一个项目,客户对浏览器版本由要求,目前VUE对低版本浏览器支持不是特别好,
所以打算直接用HTML进行研发,涉及了wenbpack直接打包HTML文件,按章webpack时遇到了一些问题,查找了一些资料并记录下来。
一、下载安装node.js(npm)
因为之前安装过固跳过此步骤.
二 、配置环境
1.配置文件夹
控制台输入npm -v 也可以查看npm是否成功安装,安装成功后出现版本号说明nodejs.npm安装成功。
我的nodejs是默认安装路径C:\Program Files\nodejs,最开始是安装在其他盘的,但是配置的时候各种问题,后重装改为默认路径
在C:\Program Files\nodejs文件夹内新建两个文件夹用于全局存放依赖包路径,和缓存路径。缓存C:\Program Files\nodejs\node_cache
存放C:\Program Files\nodejs\node_global
文件夹创建完成后打开命令行输入如下命令 配置路径:
npm config set cache "C:\Program Files\nodejs\node_cache"
回车
输入:
npm config set prefix "C:\Program Files\nodejs\node_global" 回车
2.安装webpack
webpack分为全局安装,与项目安装(安装在你指定的文件夹内),我这里使用的是全局安装
启动cmd,键入如下的命令:
npm install webpack -g
点击回车,会有一个进度条,等待进度条完成后,出现如下信息(具体信息可能有差别,但是只要不出现error说明安装成功):
此时,打开nodejs的路径C:\Program Files\nodejs\node_global文件夹,发现多了一些东西:
此时全局webpack已经成功安装。
环境变量配置
我的电脑——右键属性——高级系统设置——高级———环境变量
分别新建用户变量PATH和系统变量NODE_PATH
这是最重要的一点;在安装webpack后出现'webpack' 不是内部或外部命令的问题 就是此处设置不对
PATH和NODE_PATH全部设置为:C:\Program Files\nodejs\node_global。
看到网上的设置方法为 :NODE_PATH属性指向C:\Program Files\nodejs\node_global\node_modules,这样设置并不对,就会导致报不是内部命令
按照以上步骤nodejs npm webpack算是真正安装配置完,然后就可以直接使用了。
webpack打包HTML、JS、CSS
https://www.cnblogs.com/luojianjian/p/8053113.html
转载于:https://www.cnblogs.com/zhouy-77253569/p/9486501.html
打包HTML文件基础之webpack配置相关推荐
- 前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作 即在一个最终的js文件中引入其它的js文 ...
- 如何修改Vue打包后文件的接口地址配置
1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
- vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
- 不暴露 create react app 的webpack配置下,修改webpack配置
使用 react-app-rewired react-app-rewired 传送门 安装 react-app-rewired npm install react-app-rewired --save ...
- vue-cli脚手架中webpack配置基础文件详解
一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...
- webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
- webpack配置指定文件不打包
引言 在打包配置时,会有一些需求是指定某些文件夹下的某些文件指定不打包压缩的,经过学习,webpack的CopyWebpackPlugin可以帮助我们解决整个问题,下面介绍一下制定流程: 1.npm安 ...
- webpack 大法好 ---- 基础概念与配置(1)
再一次见面! Light 还是太太太懒了,距离上一篇没啥营养的文章已经过去好多天.今天为大家介绍介绍 webpack 最基本的概念,以及简单的配置,让你能快速得搭建一个可用的 webpack 开发环境 ...
最新文章
- 通过OKR复盘会议你会学到哪些?
- 软件开发模式对比(瀑布、迭代、螺旋、敏捷)
- iOS 转换BGR24 为 RGB24
- Java 线程多线程编程1---基础
- dubbo 支持服务降级吗_关于dubbo的服务降级
- LeetCode(653)——两数之和 IV - 输入 BST(JavaScript)
- 2018/2/28 省选模拟赛 40分
- python脚本——Excel处理
- android手机画质修改器,全机型画质修改器
- 电子地图“顽疾”难治,会“传染”自动驾驶专用高精地图吗?
- Integer计算保留小数点位数
- 简单的MediaPlayer+SurfaceView实现视频横竖屏播放
- 计算机底层:进程与线程。
- 小米5s 小米6 MIUI 系统 删除温控 破解限制
- node搭建web服务器时,图片显示不出来
- 23种设计模式模式笔记+易懂案例
- 从工作量证明(POW)到高阶工作量证明(HPOW)
- python循环引用的解决办法
- 海量智库第4期|Vastbase G100核心技术介绍之【NUMA架构性能优化技术】
- 一头牛,3年后生了一头小牛(第4年开始),之后每年生一头