从零入门nodejs，并新建一个webpack项目

开始之前先定一个准则，我的博客未必全部正确，要敢于质疑，路不通就换条路。

一、该文章的基本内容

• nodejs的安装
• yarn安装
• 创建webpack项目
• 配置package.json 让项目跑起来
• 安装gulp管理工具
• 对css进行预处理 => gulp-sass (有个gulp4的坑)
• 刷新页面神器 => browser-sync
• html预处理 => jade(Pug)

---

1. 安装node

因为这算是名副其实的从零开始了...所以。。就先从安装nodejs开始吧 => 戳我进入node中文官网

选择安装版本就不说了，傻瓜式安装，不需要任何操作。

二进制版本(就是解压即用的版本)我也不说了，开始玩node的人应该基础都没问题，环境变量啥的配的都是小意思了，Linux和MacOS自行解决吧，以后我应该会把方法贴上去。

测试是否已经安装成功用node -version检测，有显示版本号就安装成功了。

未找到命令，多半是环境变量没有配置好，具体解决方案。。我懒得写，自行百度。。。。

---

2. npm安装，yarn安装

npm查看

看网上说在安装node的时候也包括了npm，node很久以前装的，基本上也忘了网上说的可靠性，总之，完成上一步(安装node)之后，在cmd中输入npm -version检查下版本号。

如果说未找到命令，多半是环境变量没有配置好。

针对这个问题，有一个可能的原因，你下载的是二进制版本的node，然后只配置了node的环境变量，没有配置npm的环境，具体解决方案。。我懒得写，自行百度。。。。

yarn安装

yarn是Facebook最近(估计都过去好久了)发布的一款依赖包安装工具，yarn是一款新的，快速，安全，并且是可替换npm的依赖管理工具。

安装方式使用npm。。。。

npm install -g yarn

这里-g的属性是指全局(现在想想应该是global这个词)，如果安装阶段出了报错，就把报错内容复制下来百度，因为我没有遇到过问题，所以就不介绍了。

检查是否安装成功 -- 查看版本号yarn -version，如果显示版本号，就说明安装完成了。

---

3. 创建webpack项目

选择一个文件夹，作为webpack项目的目录，我这里建立在F盘的item文件夹的webpackDemo文件夹里了，路径为F:itemwebpackDemo

然后在该目录下按住shift键，并点击鼠标右键。

win7以前是点在此处打开cmd命令窗口(具体名称不记得了，反正差不多这样)

win10点击在此处打开Powershell窗口

安装:

• 进入命令窗口之后，使用npm init -y配置一些基础属性，-y的属性意思是后面的所有选项都默认为yes，后面我会详细说里面会遇到的选项，现阶段直接用-y就好

• npm install webpack --save-dev安装webpack，使用—save-dev，将通知计算机在package.json中添加gulp依赖 (Linux也有dev啊，大概是development开发者的缩写。。。以前一直理解为驱动)

• npm i webpack-cli --save-dev安装webpack脚手架 (i是install的简写)

然后等待下载...然后你会发现下载超慢的，毕竟服务器在国外嘛，没办法的。

要想提升下载速度的话，可以下一个npm的中国淘宝镜像，具体方法这里懒得写了(实际上我记不清怎么弄了)，文章挺多的，就搜npm淘宝镜像就有一大堆结果。。。

如果安装了淘宝镜像，把npm命令换成cnpm就行了，记得安装淘宝镜像的时候属性要加个-g哦~~ 一般他们文章都会加上-g哒，不会太坑的 (是不是已经开始下载了才看到后面说的提速的方法啊，不过可以用ctrl + c终止程序的哦~~)

等安装结束，如果没有报什么错误的话，你应该会发现，当前目录下F:itemwebpackDemo 里出现了一个文件夹和一个json文件，下面来说说这两个文件。

• package.json 项目配置文件，不能删
• node_modules 项目安装的环境文件，这个文件是根据package.json生成的，可以删除，不过建议在看完我这篇博客之前不要删。。。除非你就是那传说中的大佬。

到这里，webpack算是建立起来了，但是这只是建立起来了，

---

4. 配置package.json 让项目跑起来

打开package.json文件(欸，我是不是超级啰嗦的啊)

超级干净的一段标准json代码。。。

    {
      "name": "build_webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.31.0",
        "webpack-cli": "^3.3.2"
      }
    }

比较难受的是，在json文件中写的任何注释都会报错Orz


这里面的大部分方法我暂时都不介绍了(因为后面会一一说明 => 其实并没有说明，不过我贴个文章，属性详解的)

这里我只说明两个参数，一个是devDependencies，一个是scripts。

先引用下定义：

• devDependencies 这些依赖只有在开发时候才需要。
• scripts 通过设置这个可以使npm调用一些命令脚本，封装一些功能。

对于devDependencies，如果你比较敏感的话，会发现这里面的内容正式我们前面用npm安装的包名webpack和webpack-cil，不难推出，这个是我们已安装的依赖名称。

先不管发生了什么，先在package.json的scripts中加上一段代码"build": "webpack"

  {
      "name": "build_webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack" 
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.31.0",
        "webpack-cli": "^3.3.2"
      }
    }

运行npm run build(对，run后面的字段正是scripts中的build字段，代码执行了build对应的webpack命令)，然后会报出一个警告一个错误。

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

原因是没有设置编译模式……不过我们程序员都是只看错误(error)不看警告(warning)的对吧？

ERROR in Entry module not found: Error: Can't resolve './src' in 'F:itemwebpackDemo'

在项目目录下找不到入口文件，根目录里创建一个名叫src的文件夹先……然后根据package.json里的main后面的内容在src里创建入口文件，我这里配置的是index.js(看上面代码块里的"mian": "index.js"字段)

我这里简单写了个打印语句

    console.log('僕のイヴは仙女です!!!');    // 咳……失态了    

然后再跑一遍npm run build，等运行结束，检查下目录下，应该是多了一个dist目录，里面还有一个main.js的文件，如果没有或者是多了点奇怪的东西，我不背锅。。。搜报错，然后百度，学会自主学习。

到这里，项目就能跑起来了，下面我们详细配置一下scripts运行脚本，我们这里给它添加一个mode属性，解决掉之前的那个warning(说不看警告都是假的...不过大部分都不看，欸嘿嘿)

mode中有两种模式

• development 开发者环境，代码格式规范，可读性强
• production 生产环境，文件都是压缩过哒~~

    {
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "webpack --mode development", 
        "build": "webpack --mode production" 
      }
    }

然后你可以运行打包一下，我就不演示啦~~

不过注意一点，两个模式输出文件都在./dist/main.js中，所以运行完一个看一下，否则文件会覆盖，就看不出效果啦~~

挺不方便的对吧，那就再配置下输出文件的目录，还是package.json的scripts。

    {
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "webpack --mode development ./src --output ./development/main.js", 
        "build": "webpack --mode production ./src --output ./dist/index.js" 
      }
    }

没错，--output前面的.src正是我们源文件目录，这个可以根据需求修改，--output后面的是输出目录，将文件输出至指定的目录，后面跟文件名...(我真的超级啰嗦的对吧)

以上，webpack项目搭建出来了。

---

5. 不作死就不会死 删除 node_modules

node_modules挺大的，项目推送的时候放到包里很不方便，怎么办，删了吧，反正有package.json撑着，如果删了的话，会发现，先前运行好好的npm run dev或者是npm run build都不能用了。。。

原因很简单，这个文件夹里的内容都是项目依赖，里面安装的插件都在package.json中有备份，所以再安装回来的话在当前目录下用指令npm install --save-dev，然后等待安装。

---

6.1 安装各种插件(全部用局部安装) -- Gulp系列

高能预警

*** 这里安装的是Gulp4，使用起来坑一堆，查了好久的资料呢 ***

• gulp => 安装
• sass => css预处理
• browser-sync => 自动刷新浏览器
• watch => 配置监听

首先，gulp是什么，为什么要用它？

...找文章超级麻烦的晚点再加上，目前先玩着吧，反正书上要装，没办法，装吧，据我所知很有用就是了。

npm i gulp --save-dev

局部安装gulp插件，并且将依赖名写入package.json文件中。

根目录下创建一个gulpfile.js文件，用来配置gulp。。。

    const gulp = require('gulp');   // 先引用文件，Java还要import一下包才能用其他的Java文件呢

这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。找到之后就会赋值给gulp变量，然后我们就可以使用它了 (这段文字复制的...)

下面用gulp写一个简单的案例(上面的const gulp = require('gulp')也要带上的):

    gulp.task('Eve', function(){
        console.log('...?');
    });

运行这行代码 (注意，还是工程目录下)

gulp Eve

名字正是gulpfile.js中gulp.task后面的第一个字段Eve，一般开发的话不会这么做，只是告诉你这么写程序已经可以运行起来了，引用某篇博客的一句话就是

Gulp任务通常都会比这难一丁点，就一丁点。通常会包含两个特定的Gulp方法和一些列Gulp插件

模板什么的就不写了，直接上代码。。。

---

gulp-sass 对css进行预处理

1. 安装 npm i gulp-sass --save-dev

2. 配置

    // 新插件？安装，引用，配置，使用(盗用某篇博客的话)
    const sass = require('gulp-sass');

    gulp.task('sass', function(){
        return (gulp.src('./src/css/*.scss'))   // 输入的文件
        .pipe(sass())   // 安装的依赖
        .pipe(gulp.dest('./dist/css'))  // 输出地址
    });

在这里我们可以新建点测试文件，在src/css/的目录下创建两个scss文件(scss好像和sass是同一种文件，不同的后缀。。)，然后在里面随便写点代码，这里我写了个testFile.scss的文件，内容如下

  $height: 50px;
  $ percentage(5 / 7);
  .test{
    height: $height;
     percentage(10 / 5);
    background: aliceblue;  // 个人超喜欢这个颜色的，还有aqua (注释内容不会被编译)
  }

3.样式都写完了，不跑一遍试试么？

gulp sass (以后代码就用引用的格式写了)

如果想看看自己之前创建的所有任务(task)名称的话，可以用以下方式查看

gulp --tasks (注意，有个s哦~~)

如果没有编译出来的话，自己看报错，然后百度哦~~

到这里gulp-sass就配置完了(我应该分成几篇博客来写的吧……)

---

关于 browser-sync ……算了，往后面看吧，文章坑了我好久

browser-sync能够在文件保存的时候自动刷新浏览器(虽然配置了，但还是习惯地随手敲一个ctrl + r。。。)，至于效果。。等自己配置完试试？

npm i browser-sync --save-dev

安装本地运行环境的话，只能靠配置package.json的scripts才能看到结果(或者安装全局，直接在cmd中执行)

上面那段话无视了吧，绕人。

在node项目中，browser-sync能与gulp很好的搭配起来，这里只介绍一个用gulp配置browser-sync的方法。

先在gulpfile.js中配置

    // 老规矩，先引用文件
    const browserSync = require('browser-sync');
    
    gulp.task('browserSync', function(){
        browserSync({
            file: ['dist/**'],  // 运行文件的路径，这里指的是src/dist目录下的所有文件
            server: {
                baseDir: './',
                index: 'dist/index.html',    // 进入入口(首页)
            },
            port: 3001  // 使用的端口号
        });
    });

然后再dist目录下创建一个index.html，内容随便写

运行测试

gulp browserSync

经过漫长的等待(我电脑垃圾)之后，跳出来一个页面，如果左上角没有一个cannot GET，页面标题也不是Error的话，那么你大概就是成功了Orz

但是很快就会发现，修改里面任何文件，都不会让浏览器自动刷新(我猜你是没试)。。。这时候要涉及到gulp里面的一个api了。

---

利用gulp对内容监听，修改时更新页面

gulp有个监听操作，能够监听事态变化，然后做出相对应的变化，变化可以用默认的，也可以覆盖原有的默认方法，这里我们要监听两样东西。

• 当sass文件修改的时候自动编译sass
• 当输出的(dist)文件夹里有文件变动的时候刷新浏览器

在这里我们再gulpfile.js里添加点监听事件

这里有个gulp4的小坑，后面的方法要用gulp.series('sass' <= 方法名)

    gulp.task('watch', function(){
        
        // 第一个是要监听的文件目录，我这里写的是src下css文件夹中的所有文件.
        gulp.watch('./src/css/**', gulp.series('sass'));    // 其中sass是之前定义的方法名
        
        // 当文件修改的时候 刷新浏览器
        gulp.watch('./dist/**', gulp.series('browserSync'));
        
    });

然后，运行。。。

gulp watch

如果出现丢包需要安装的话，不要跟着套路跑，，因为一下起来就没完没了了。。。。这个时候把之前装的包(node_modules文件夹)删了，然后npm install重新安装

如果用的gulp3的话，这里的代码使用应该会报错，反之亦然，这时候复制报错，然后丢网上搜一下就好了~~

到这里，自动刷新就配置完了，不难，对吧？反正我是搞了三天Orz

据说browser-sync还能设置代理~ 不过我是懒得写了~~~

---

jade(Pug) html预处理

安装，配置，使用，前面都看了的话，后面也就没什么好赘述的了，直接上代码。

npm install gulp-jade --save-dev

然后是gulpfile.js

    const jade = require('gulp-jade');

    gulp.task('jade', function(){
        return gulp.src('./src/html/*.jade')
        .pipe(jade())   // 完全抄前面的。。。
        .pipe(gulp.dest('dist/html'))
    });

然后在gulp.task('watch', function(){})里加上一句

gulp.watch('src/html/*.jade', gulp.series('jade'));

最终gulp.task('watch', function(){})里的内容是这样的

    gulp.task('watch', function(){
       // 监听html文件夹下的文件变化事件
        gulp.watch('./src/**/*.jade', gulp.series('jade'));
    
        // 监听css文件夹下文件变化事件
        gulp.watch('./src/css/**', gulp.series('sass'));
    
        // 监听文件变化事件，刷新服务器
        gulp.watch('./dist/**', gulp.series('browserSync'));
    })

---

到这里基本上结束了，简单总结下好了Orz

1. 踩了无数坑下来，搭建出了一套简单的webpack，你以为这样就结束了么？下面的东西你都装了么？

• ES6语法转换 => babel-core babel-loader babel-preset-env babel-polyfill babel-plugin-transform-runtime
• 编译css，自动添加前缀，抽取css到独立文件 => mini-css-extract-plugin css-loader style-loader postcss-loader
• 复制并压缩html文件 => html-webpack-plugin html-loader
• dist的清理，打包前清理源目录文件 => clean-webpack-plugin
• assets的处理，静态资源处理 => file-loader
• development 模式下启动服务器并实时刷新 => webpack-dev-server

以上列表内容从该文章抄来 => 该文章

2. 尽可能不要看没有目录的文章，比如这篇，会浪费您大量的时间(lot for less)

3. 引用某博客的一句话，框架只是工具，不要花太长时间在工具上

4. 少熬夜，感冒 + 咳嗽 > 成就，为了肝完博客而生病不值得Orz

5. 注意版本号，还有各种全局安装的坑，别人项目里全局安装的变量没有保存到package.json里，在你电脑就算是 npm install 也救不活你

6. 好冷 (>_<) 如果想要去做什么事情的话，去做自己想做的事情吧，虽然三分钟热度，但是注意力是能够完全集中的，永远追求最大效率的学习。

7. md编辑后id的空格会转换成连字符 => " - " ；括号会删除；省略号也会删除；所有符号都是小写；

8. 如果遇到什么问题务必提出，我会把文章更新的Orz