npm nrm cnpm webpack webpack-dev-server

NRM是提供了一些常用的NPM包镜像站的工具。

因为NPM的地址源在国外，所以使用NRM可以明显的提高访问下载速度。

npm i nrm -g # 全局安装nrm
nrm ls # 查看所有镜像的地址,这里的cnpm不是装包工具
nrm use taobao # 切换地址源

装包工具 还是NPM，NRM只可以更改访问源 
然后使用npm i 下载，就会访问淘宝的源了

npm i cnpm -g # 安装cnpm装包工具

 更改NPM 安装位置
npm config set prefix "F:\nodejs\node_global"
npm config set cache "F:\nodejs\node_cache"
#如果npm卡主，删除user用户下的.npmrc文件

 全局安装nrm
 npm i nrm -g
 
 切换npm源
 nrm use taobao
 //如果没有找到命令,将E:\NodeEnvs\npm添加到全局环境变量中
 
 全局安装webpack
 npm i [email protected] -g
 
 初始化项目文件目录
 npm init -y
 
 安装jquery
 npm i jquery -S
 
 将main.js转化成兼容的bundle.js
 webpack ./src/main.js ./dist/bundle.js

const path = require('path')

module.exports = {
  //入口，表示使用webpack哪个文件
  entry:path.join(__dirname,'./src/main.js'),
  //输出文件相关的配置
  output:{
      //指定打包好的文件，输出到哪个目录
      path:path.join(__dirname,'./dist')
      //指定输出的文件名词
      filename:'bundle.js'
  }
}

安装 webpack-dev-server
npm i webpack-dev-server -D
因为是本地安装，不是全局安装，所以我们需要去配置它
package.json中
script:{
   test:xxx  //在下面增加dev
   "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot" 
   //--open 是运行时，默认打开浏览器
   // --port 3000 设置端口
   //--contentBase src 打开网页 默认访问src，src为根目录 ，而不是原来的文件根路径
   //--hot 热更新，不写是每次内存重新加载一份完整文件，写了是在内存另外的地方，再加载更新的部分，
           浏览器无刷新重载.
}

webpack-dev-server 如果想要正常运行，要求在本地项目中，再安装一个webpack
(哪怕全局安装过 npm i webpack -D)
webpack-dev-server作用是 实时的监听代码的改变，自动编译，不用我们每次手动去webpack编译了
 webpack-dev-server 将项目已服务器形式打开。
 webpack-dev-server 将bundle.js 并没有将它存到本地磁盘，而是加载到内存中，
 									访问地址为根路径(/)，没有真正生成。

npm run dev 启动服务器

webpack-dev-serverde的参数，还可以写在webpack.config.js中
npm nrm cnpm webpack webpack-dev-server