-
安装nodejs
我的安装目录为默认安装路径，也就是 C:\Program Files\nodejs
这里的安装路径对于后面的配置环境变量有很大的关系，请记住
配置环境变量。
可以参考https://blog.csdn.net/henery_002/article/details/78016575 -
用命令行来检查是否安装成功
node -v
npm -v
成功安装则会出现相对应的版本号
安装成功.png
-
在安装路径下，我们可以看到有这样的文件存在
文件.png
我们自己手动新建两个文件夹，分别是：
- node_global 全局包目录
-
node_cache 缓存目录
将对应的路径加入环境变量中，上述链接有详细说明，这里不再赘述
用户path.png
其实我们这里只要加入C:\Program Files\nodejs\node_global就行了
另外一个是系统自己生成的，看上图
系统NODE_PATH.png
添加全局包目录所在路径，看上图
添加属性.png
在系统变量的Path 下面添加安装路径，看上图
-
对应操作结束之后，发现打入 npm install express -g并不能安装
出现了下面的错误
image.png
最后终于在网上寻求到了答案，发现安装这个时候的命令行窗口必须用管理员身份运行才可以进行安装（win10在桌面左下角搜索栏输入”cmd"出现下面这个）
命令提示.png
鼠标右键管理员身份运行即可。
可以发现管理员身份打开命令提示符的时候是C：\Windows\system32>...
管理员身份安装.png
安装完之后要在命令行里面看看版本号
如果可以看，则说明配置没有问题
express有点例外
初始化npm.png
得先定义为全局变量.png
在这里最好指定版本，如果是npm install webpack -g是直接安装最新版本的，我在这里安装了最新版本，在下面打包的时候就踩坑了。
安装的时候应该输入这句：
npm install webpack@3.5.3 -g
在对应的目录下面用--save-dev 可以在本地生成一个json文件
所以要先进入那个文件夹
生成之后就可以在这个文件夹进行相关操作了
C:\Windows\system32>cd C:\webpack\webpack-test
C:\webpack\webpack-test>npm install webpack --save-dev
目录中的webpack.png
但是出现了问题：webpack新版不能直接使用webpack这个命令，已经分离到了webpack-cli之中。但四使用webpack-cli还是不能使用，有很多坑。采用降级，我使用了3.5.3版，这个版本是好的。可以直接用webpack命令。
所以我就把刚刚的卸载了，安装了指定版本的
npm uninstall webpack -g
npm install webpack@3.5.3 -g
再次安装webpack.png
这样的话webpack命令就能够直接用了。
进行打包
webpack hello.js hello.bundle.js
// 将hello.js打包成hello.bundle.js
打包：
记得要在你的打包的文件的那个路径下面
直接在命令行输入
webpack
就完成了
image.png
打包js文件.png
图片第二部分有两个模块，是因为在hello.js中引用了这个world.js，所以一起打包了。
- 加载css文件进去的时候要注意，必须先安装style-loader,css-loader，使得css文件被引用之前先被css-load处理，并且css文件可以生效，这样可以正确的被webpack进行打包
安装css-loader.png
引入css文件.png
新建一个html文件引入hello.bundle.js(跟平常引入js文件一样）
每次修改js，css文件之后都要用 webpack命令重新打包。也可以用命令自动更新（ --watch)
webpack hello.js hello.bundle.js --watch
这样的话修改之后就不用命令行打包了
用cnpm(淘宝镜像）代替npm
1.png
cnpm代替npm.png
安装指定的依赖：
格式： cnpm install 包名称
如下：
cnpm install babel-polyfill
也可以先在package.json文件里面先写好要安装的依赖包和版本
比如
"babel-polyfill":"^6.0.0"
然后再在命令行里面执行
cnpm install
关于ｗｅｂｐａｃｋ的配置
自己新建一个webpack.config.js文件
在里面进行入口文件和输出文件的设置
const path = require("path") //定义一个路径，这个是一定要写的，可以不用管他,就当作是我们这一整个webpack项目的位置
module.exports={
entry:path.join(__dirname,"src/script/main.js"), //设置了程序的入口.就在这个项目src下面的script下面的main.js,注意dirname前面是__
output:{
filename:"bundle.js", //输出的文件名为bundle.js
path:path.join(__dirname,"dist") //设置了输出文件名的路径，在本项目的dist文件夹下面，没有的话webpack会自己建的
}
}
//module.exports就要要想外界暴露的部分，外面的人可以根据这个来进行操作
简而言之，构建一个ｗｅｂｐａｃｋ应用的步骤如下：
１. 新建一个文件夹，这里我给他起个名字叫 web
２. 在web的路径下用命令行
cnpm install webpack --save-dev ／／我已经用淘宝镜像了ｃｎｐｍ
３. 自己新建ｗｅｂｐａｃｋ．ｃｏｎｆｉｇ．ｊｓ定义入口和出口文件
４. 弄个ｊｓ文件什么的打包
在web的路径下用命令行
webpack
就可以了
打包出来的ｂｕｎｄｌｅ．ｊｓ为什么有那么多乱七八糟的内容？
只要是为了封装ｊｓ，使其支持ｃｏｍｍｏｎｊｓ的模块化
ｃｏｍｍｏｎｊｓ是要依赖于ｎｏｄｅｊｓ ｗｅｂｐａｃｋ的
如何用webpack压缩js代码
-
首先在webpack.config.js中引入
const uglify = require('uglifyjs-webpack-plugin');
2.然后在entry和output后面加上
plugins:[
new uglify()
]
image.png
然后再执行“webpack”命令编译一下
image.png
被压缩啦
webpack都做了哪些事情？
模块化
打包依赖
webpack支持commonjs,如果没有模块化，用<script>标签引入，我们要完全搞清楚每个模块之间的依赖关系，要保证你依赖的js文件在你这个文件的前面，搞错一个依赖关系就完蛋，而且要定义很多全局变量，会造成全局变量污染。
webpack的理念就是一切皆模块，把那一大堆css,js在我的一个总入口文件require引入，剩下的事情webpack会自动处理，包括所有模块的前后依赖关系去下载啊处理
压缩Js代码
先了解一下Webpack从构建到输出文件结果的过程：
1.解析配置参数，合并从shell传入和webpack.config.js文件的配置信息，输出最终的配置信息
2.注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应
3.解析配置文件中entry入口文件，并找出每个文件依赖的文件，递归下去
4.在递归每个文件的过程中，根据文件类型和配置文件中loader找出相对应的loader对文件进行转换
5.递归结束之后得到每个文件最终的结果，根据entry配置生成代码chunk
6.输出所有chunk到文件系统
windows怎么卸载cnpm？
npm uninstall cnpm -g
Npm常见问题
https://blog.csdn.net/ribmusic/article/details/80508748
自从在公司经历过莫名其妙的抛出错误后
自己的电脑也出现了问题，难道是因为自己拷了那两个文件过去？？？？
image.png
然后就看到了这样一篇博客：
image.png
打了 rm -rf node_modules和cnpm install （我已经把npm替换为cnpm)之后发现还真的好了
神奇。
网友评论