npm nrm cnpm webpack webpack-dev-server

r囧r小猫 2022-02-24 04:36 165阅读 0赞

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 webpack@3.6.0 -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中  
![在这里插入图片描述][20190403200137722.png]  
![在这里插入图片描述][20190403200320772.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70]

将页面也存放在内存中  
npm i html-webpack-plugin -D

webpack.config.js  
![在这里插入图片描述][2019040320292966.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20190403203404797.png]

--------------------

npm -i 与npm install -s与-d的区别  
[https://blog.csdn.net/u012967454/article/details/87098324][https_blog.csdn.net_u012967454_article_details_87098324]

npm i和npm install的区别  
[https://blog.csdn.net/chern1992/article/details/79193211][https_blog.csdn.net_chern1992_article_details_79193211]

--------------------

打包css  
webpack 默认只能打包js  
不能打包css,css需要另外安装  
cnpm i style-loader css-loader -D

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 2]  
use的使用顺序是 从右向左，当最左后，交给webpack处理，打包到bundle里去

**打包less**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 3]

**打包scss**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 4]

**url-loader**  
处理图片等url路径  
cnmp i url-loader file-loader -D

![在这里插入图片描述][20190403210148268.png]  
会将图片进行base64编码，如果不想  
使用limit  
![在这里插入图片描述][20190403210425480.png]

保持文件名不变，加上\[name\] 和后缀名\[ext\] ,会打包到 根目录  
防止图片重名被覆盖掉，加上\[hash\]  
![在这里插入图片描述][20190403210739870.png]

[20190403200137722.png]: /images/20220224/789842248e024da5a353b2cca7561713.png
[20190403200320772.png]: /images/20220224/d07a2b7ab7fe4caea5ade6e34f70fee9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70]: /images/20220224/cbe9fb4a97af487b968ffce77d4c1498.png
[2019040320292966.png]: /images/20220224/1d2e671a5d1a40a798d9a21a0f6ef714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 1]: /images/20220224/7ab94a0a07be45ddad79b4b0e7b88725.png
[20190403203404797.png]: /images/20220224/720c4504e9a14d7cbf3a886630b2293e.png
[https_blog.csdn.net_u012967454_article_details_87098324]: https://blog.csdn.net/u012967454/article/details/87098324
[https_blog.csdn.net_chern1992_article_details_79193211]: https://blog.csdn.net/chern1992/article/details/79193211
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 2]: /images/20220224/60f6c2641e1a4e31b9c8eb9ca9f91e09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 3]: /images/20220224/c347ca10d1f3436fae5cef1ec6626da1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnQyMDE4_size_16_color_FFFFFF_t_70 4]: /images/20220224/1b9fe76ab26242df933384b351221ac5.png
[20190403210148268.png]: /images/20220224/4ec96ea5164d43bdab2cc1f7d03023e2.png
[20190403210425480.png]: /images/20220224/f1a222b59dfe422285faec855116642b.png
[20190403210739870.png]: /images/20220224/7e22b142d6a64fbebc5117b6876d3988.png