node和npm和webpack的安装及配置

旧城等待， 2021-11-05 14:50 470阅读 0赞

**1、官网下载node.js并安装在非C盘路径**

![20190807115553970.png][]

**2、安装cnpm(淘宝镜像)**

**npm install -g cnpm --registry=https://registry.npm.taobao.org**

![20190807115624517.png][]

**3、安装nrm  命令 npm install nrm -g**

![20190807121849992.png][]

**nrm ls 查看所有可用的路径**

![2019080712192274.png][]

**4、切换到淘宝源 nrm use taobao**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70][]

**(cnpm安装完毕)**

**4、全局安装,  cnpm install webpack webpack-cli -g  **

**推荐全局指定版本安装 ****npm install webpack@3.6.0 -g  (4.x需要安装webpack-cli)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 1][]

**ps:卸载命令 npm uninstall webpack webpack-cli -g**

**5、webpack打包测试, webpacktest包有如下3个文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 4][]

**手动打包步骤**

**a、进入webpacktest目录**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 5][]

**b、进如cmd通过入口js进行打包生成build.js**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 6][]

**c、在html中引入即可**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 8][]

**使用webpack-dev-server自动打包步骤**

**a、新建webpack01目录,结构如下(复制webpacktest中的文件)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 9][]

**b、进入到webpack01目录安装插件**

**cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 10][]

**安装完成后会生成node\_modules和package.json**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 11][]

**c、在package.json中添加scripts**

{
      "scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 5008"
      },
      "devDependencies": {
        "html-webpack-plugin": "^2.30.1",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1"
      }
    }

**--line:自动刷新     --hot:热加载  --open:自动在默认浏览器打开  --port:指定端口**

**--host:指定服务器的ip,如果对外发布则填写公网ip地址,不填写默认127.0.0.1**

**d、添加webpack.config.js配置文件**

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
    var htmlwp = require('html-webpack-plugin');
    module.exports={
        entry:'./src/main.js',  //指定打包的入口文件
        output:{
            path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
            filename:'build.js'		   //输出文件
        },
        devtool: 'eval-source-map',   //开启debugger断点调试
        plugins:[
            new htmlwp({
                title: '首页',  //生成的页面标题<head><title>首页</title></head>
                filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
                template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
            })
        ]
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 12][]

**e、运行打包.在package.json右键选择show npm Scripts**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 13][]

**双击dev(其实执行的是npm run dev)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 15][]

**一切正常网页就会自动打开**

![20190809112744430.png][]

**修改代码测试热加载**

![20190809113100902.png][]![20190809113112973.png][]

[20190807115553970.png]: /images/20211105/1c7229258f6a4ae6a6bce0969b1af61e.png
[20190807115624517.png]: /images/20211105/f4e657db553449cfbfc347d10b584cc9.png
[20190807121849992.png]: /images/20211105/18c38cca806a486494d9f8e5a48b04ff.png
[2019080712192274.png]: /images/20211105/be5f01ac8e3e4d4d8398044e107a1111.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70]: /images/20211105/a8b185783cf742d2ba47b64b2d10dbde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 1]: /images/20211105/1816fdbb7c054b008be7966f42746e7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 2]: /images/20211105/9fc0abf311754417b5edb1c53d5dcedd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 3]: /images/20211105/c6546fa669f9489e837e6e72a80afef8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 4]: /images/20211105/1bd074344fe842f1be80fa453b5d5a58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 5]: /images/20211105/b86853f3a32d4647b386b470934282d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 6]: /images/20211105/937128669b8c4f70ae2a7189a832a95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 7]: /images/20211105/8e3724c0eaf74842a9a18b352ab23815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 8]: /images/20211105/8429bd567a334af4b5b6993337b96959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 9]: /images/20211105/0a8b71a070014c40800eee400dd34094.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 10]: /images/20211105/b33ba40c5a044e5b91f55b213ec75528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 11]: /images/20211105/1551fd855f1c4f1e9a691bad4990bab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 12]: /images/20211105/4bd89e6278454f78981afaf52fce3fbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 13]: /images/20211105/11a591536ff0473dafa2849aa73550bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 14]: /images/20211105/4b4cda132156468aa7d5745a19effcbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70 15]: /images/20211105/aaf25332292741f8bc12e14f8133090d.png
[20190809112744430.png]: /images/20211105/a8ddd32b06524ba9a8b3a9ca37a29b50.png
[20190809113100902.png]: https://img-blog.csdnimg.cn/20190809113100902.png
[20190809113112973.png]: /images/20211105/6f90511c27fc4fa8bdeab4a5dedb8d0b.png