安装webpack和webpack打包(此文转自Henery)-阿里云开发者社区

开发者社区> youcongtech> 正文

安装webpack和webpack打包(此文转自Henery)

简介: Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址,进入node.js官网,下载node.js,图中蓝线标注的为稳定版,右边没标注为最新版,推荐稳定版 node.js官网地址为:https://nodejs.org/en/ 2.安装node.js 一路下一步,记住安装路径(此处安装在 D:\Program Files\nodejs 下)。
+关注继续查看

Henery博客地址为:http://blog.csdn.net/henery_002

写的很详细,可以做参考

最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化

1.输入如下地址,进入node.js官网,下载node.js,图中蓝线标注的为稳定版,右边没标注为最新版,推荐稳定版

node.js官网地址为:https://nodejs.org/en/

2.安装node.js

一路下一步,记住安装路径(此处安装在 D:\Program Files\nodejs 下)。

安装完成后(需要配置环境变量:新建NODE_PATH,取值为node的安装路径,如:E:\Program Files\nodejs\node_modules)运行cmd,执行node -v和npm -v命令查看安装情况。如执行结果如下图,说明安装成功。

3.配置npm的全局模块的存放路径以及cache的路径

 

然后执行如下命令:

 npm config set prefix "D:\Program Files\nodejs\node_global" 回车

 npm config set cache "D:\Program Files\nodejs\node_cache" 回车

 

4.配置环境变量【****】

4.1 控制面板-系统和安全-系统-高级系统设置-高级-环境变量,

新建【系统变量】

变量名:NODE_PATH

变量值:D:\Program Files\nodejs\node_global\node_modules

(即步骤2全局模块的存放路径,亲测实际应该是D:\Program Files\nodejs\node_global\)

4.2 再将【用户变量】下的path值后追加:

D:\Program Files\nodejs\node_global

(亲测实际在【系统变量】中的path中也追加了NODE_PATH的相同路径,即D:\Program Files\nodejs\node_global)

 

至此,便可使用 npm 安装相关模块,如安装最常用的 express 模块进行测试:

 npm install express -g 回车

 

 

 

5.尝试安装模块bower

执行命令:

  C:\>npm install bower -g (-g指安装到node_global文件夹中,-g前有一个空格)

若-g前没有空格,错误安装结果为:

安装成功后,将看到node_global文件夹下新增文件夹 node_modules>bower

 

 然后执行 bower -v。(若报错bower不是内部或外部命令,则是因为环境变量未配置好)

 

 

6.初始化npm

重新运行cmd(命令行创建子文件夹方法:mkdir webpack-test),初始化npm:

 npm init 回车。

一路回车(则将会以默认参数创建初始化json文件package.json)

7.安装webpack

首先需要安装一个全局webpack:

 npm install webpack -g 回车

这样才可以正确使用webpack的命令;然后还可以在当前项目里也安装一个webpack,这是官方推荐的做法:

 npm install webpack --save-dev 回车

(此处我只安装了全局webpack,即只执行了第一步,并未影响)

安装完成后在执行 webpack 测试时极易出错提示 webpack不是内部或外部文件。解决方法:建议在检查环境变量(NODE_PATH、Path)是否有问题之后,删除已安装的webpack重新进行 -g 全局安装。

webpack测试成功后,可进行步骤8:

 

8.使用webpack打包hello.js测试文件

对示例文件hello.js进行打包:

  D:webpack\webpack-test>webpack hello.js hello.bundle.js 回车

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CentOS 6.5 安装 Redis 执行 make #error "Newer version of jemalloc required"
CentOS 6.5 安装 Redis 执行 make #error "Newer version of jemalloc required" 安装过程参考:CentOS 6.5下Redis安装记录 根据你系统安装时或之后安装的选项的情况,可能在安装的过程中遇到不同的问题; 就像今天遇到的一台机...
1069 0
TFS安装:base_packet.cpp:246: 错误:从类型‘const char*’到类型‘pthread_t’的转换无效
在CentOS 6.5 下安装TFS的过程中,出现错误:base_packet.cpp:246: 错误:从类型‘const char*’到类型‘pthread_t’的转换无效 是参考官方的安装说明安装的:https://github.
572 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
yum安装xxx包时出错,提示No package xxx available.
1.查看系统版本 [root@hadoopnn-01 yum.repos.d]# lsb_release -a LSB Version:    :base-4.0-amd64:base-4.
1379 0
node 通过指令创建一个package.json文件及npm安装package.json
描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license项的信息填写后会出现这样一段话.
787 0
+关注
youcongtech
热爱生活,热爱编程,乐于分享,善于总结。
276
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载