初识webpack

使用SASS、Babel命令行

---

1. 工程化：我们需要对之前没有任何分工的代码进行自动化，模块化以及性能优化
2. 我们之前写CSS的时候，使用的是CSS，能不能直接使用SASS？
   • SASS又叫SCSS，是一种更厉害的CSS编写方式
   • SASS是Ruby社区发明的语言
   • 安装：
     • 安装的时候使用全局安装：npm i -g node-sass
     • 安装结束，可以查看版本看看是否安装成功：node-sass -v
     • image.png
3. SCSS的使用方式
   • 直接将文件中的main.css改成main.scss：mv main.css main.scss
   • SCSS是完全兼容CSS语法的。只是在CSS的基础之上增加一些更高级的语法
   • 使用的方式直接跟着抄就好了
   • image.png
   • 我们将SCSS文件翻译成CSS文件：node-sass scss文件名 css文件名
   • image.png
   • 此时两个文件没有多大区别
4. SCSS语法使用1
   1. 嵌套规则：选择器可以嵌套到大括号里面使用
      • image.png
      • 我们再次运行翻译文件，会将原先省略的部分全部添上，即便还是有缩进，但其实分成了一个一个独立的块
      • image.png
   2. 为什么又有SASS又有SCSS？
      • 本来Ruby社区发明的SASS相当简洁
      • image.png
      • image.png
      • image.png
      • image.png
      • 但是前端说看不懂，非得添加上括号，于是Ruby在SASS的基础上发明了SCSS
      • image.png
5. HTML中引用的只能是纯CSS文件

6. 我们发现我们每次写一句话都非常麻烦，需要将SCSS文件转成CSS文件，否则没有效果，我们想着能不能自动翻译，这里我们需要使用-w

   
   
   image.png

7. 我们使用：node-scss main.scss main.css -w main.scss，来监听main.scss，一旦这个文件发生变化（文件的变化方式甚至可以使用echo命令行来实现），就执行前面的文件，这个就是一个自动化的过程，不用等我们去转换，自动转换

   
   
   image.png
8. SASS的第一个门槛是命令行
9. Babel：将ES6语法转换成ES5语法，比如IE不支持let语法，可以使用Babel，是一种命令行，https://babeljs.io/
   
   image.png
   
   
   image.png

10. 运行安装之前，需要运行npm init，这个用于创建合法的package.json

    
    
    image.png
11. 安装操作的网址在：https://babeljs.io/en/setup/#installation，选择CIL（命令行）

12. 当我们运行npm，其实就是运行上面的build里面的babel src -d lib

    
    
    image.png
13. 我们为什么运行会出错呢？因为babel是局部安装，我们安装到的是./node_modules/.bin/babel

14. 我们需要这么运行，./node_modules/.bin/babel src -d lib，这句话的意思就是将src里面的js全部翻译成IE可以使用的JS，放入-d后面这个目录中，通常这个目录我们使用dist

    
    
    image.png
    
    
    image.png
15. 全局安装与项目安装的区别
    • npm install -g http-server：属于全局安装，安装之后就可以在任意文件夹中使用这个http-server，因为安装到全局目录下了，这个全局目录包含在在PATH里面
    • npm install http-server：属于局部安装，只能在当前目录使用，安装在当前目录下，使用的时候要加上具体路径
16. 我们碰到一个跟写SCSS一样的问题，就是当用户更改JS文件之后，能否进行自动转换呢？加一个--watch就好了
17. 使用命令行：./node_modules/.bin/babel js -d dist --watch

使用更多命令行

---

1. 我们的代码分成四个部分
   • src，全称source，存放未经翻译的代码
   • dist，全称distribution，存放发布代码
   • vendors，全称vendors，存放第三方代码
   • node_modules，第三方代码，放nodejs
   • image.png
2. 工程化这个事情完全是用命令行来做的
3. 我们发现所有的src都要拷到dist里面去

4. 我们可以监听index.html的，如果index.html发生变化就将index.html拷贝到dist里面去

   
   
   image.png
   
   
   image.png

5. 我们最终需要使用命令行开启三个监听，node-sass监听CSS变化，babel监听JS变化，watch监听index.html的变化和img图片的变化

   
   
   image.png
6. 总结：
   1. 有的人喜欢写的CSS和JS版本不一样，我们可以通过翻译工具，翻译成一种

   2. 缓存，假设我们发布了一个网页，需要在每一个CSS后面加一个?v=1这样的标识，因为我们的CSS做了很长时间的缓存；一旦我们改了这个CSS，我们希望这个端口号可以更改，以便客户端更新缓存。前端在nodejs诞生之后想了各种方法来代替我们开的那几个监听窗口；一开始的工具叫做Grunt，后来Gulp替代了Grunt（比较快），后来webpack替代了Gulp。就是将命令行工具统一成一个工具。

      
      
      image.png

用webpack来代替这些命令行

---

1. 前端为什么需要这么多工具呢？

   • 前端的语言比较多，CSS/JS/Html/img/svg等，语言多。
   • 第二个原因是变化快：CSS-Less-SASS-SCSS，后来又出现Stylus（兼容less和sass）
   • image.png

2. 这种情况下webpack出现了：https://github.com/webpack/webpack

3. 我们在使用webpack之前需要将package.json回归初始状态，可以删掉，然后npm -y init

4. 运行安装webpack：npm install webpack webpack-cli --save-dev

5. 安装成功之后，package.json就会出现一个依赖库，然后node_modules/.bin/下面就会有一个webpack

   
   
   image.png

6. 我们照着操作，然后创建配置文件，我们猜测这个的意思就是将src中的index.js文件加工输出到dist中的main.js

   
   
   image.png

7. 写好这个配置文件之后，我们运行一下这个webpack，但是每次都带上目录好麻烦，使用简写：npx webpack，npx就是用来找本地目录的webpack

8. 运行之后，我们发现dist目录下出现了main.js，并且里面添加了很多js语法，说明webpack将一些语法放到这个文件里面了

   
   
   image.png

9. 原先的代码还在里面，新添加的那些代码就是为了在运行的之后，进行翻译

10. lodash可以了解下

11. 在后台，webpack实际上是“转码”代码，以便较旧的浏览器也可以运行它。

12. 所有的JS文件都写成模块化的状态，然后再入口JS那边导入并运行就好了

    • 我们有一个index.js作为整个html的唯一引用的我们写的JS文件，其余JS文件全部封装成模块，导入到index.js文件中
    • image.png
    • 有关export default function 和 export function 的区别
      • image.png
      • 第一组是使用 export default 时，对应的 import 语句不需要使用大括号。
      • 第二组是不使用 export default 时，对应的 import 语句需要使用大括号。
      • export default命令用于指定模块的默认输出。
      • 显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。
      • 所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

13. 我们需要有一个配置文件，指明每次需要进行转化的文件，下面这个文件的意思就是将./src/index.js作为入口文件，加工一下变成dist/bundle.js，然后我们在html中引入的就是这个bundle.js文件

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }};
    

14. 我们可以在webpack中使用sass将SCSS转换成css，使用babel将js进行转换。webpack中有很多插件，可以实现相关目标。安装的过程中，需要更改配置文件。

15. 概念：

    • Entry：是一个入口文件，用于构建转换的基础文件，一般会是一个JS文件，将其余JS文件以模块的形式导入到这个入口JS文件里面，JS文件中使用import导入的文件，可以是任何文件。导入任何类型的模块，例如.css文件是Webpack特有的功能，其他捆绑程序或任务运行程序可能不支持。入口文件可以多个，但是出口文件只能有一个
    • Output：是指明经过加工的文件，放到哪里，叫什么名字。
    • Loader：webpack只能理解JavaScript和JSON文件，而Loader可以转换其他文件，如将SCSS文件转成CSS（之前的SASS功能），ES6语法转ES5语法等（就是之前的Babel功能）。
      • test：用于确定转换的文件格式
      • use：指明执行转换的loader，不同的文件转换需要不同的loader
      • image.png
      • 就相当于告诉webpack，当你碰到import或者require使用的txt文件的时候，请使用raw-loader进行转换，文件名称可以使用正则
    • Plugins：插件可以执行比loader更广泛的任务，如捆绑优化，资产管理和环境变量注入。
      • 使用plugins的时候，需要使用require将对应的plugin加入到plugins数组中
      • image.png
    • Mode：模式，通过将mode参数设置为development，production或none，可以启用与每个环境相对应的webpack内置优化。，默认是produnction
      • image.png
    • Browser Compatibility，浏览器兼容性，webpack支持所有的支持ES5的浏览器（IE8不支持）。webpack需要支持Promise语法。

16. 这种时候试着去看看文档。

17. webpack支持通过加载程序以多种语言和预处理器编写的模块。加载程序向webpack描述了如何处理非JavaScript模块，并将这些依赖项包含在包中。

18. webpack社区已经为各种流行语言和语言处理器构建了loader，包括

    • CoffeeScript
    • TypeScript
    • ESNext (Babel)
    • Sass
    • Less
    • Stylus
    • Elm

19. 总体而言，webpack提供了一种功能强大且丰富的自定义API，该API允许一个人将webpack用于任何堆栈，而不必担心开发，测试和生产工作流程。

20. webpack是可以在js文件中导入CSS的

    • image.png
    • 这可以支持可以将“ ./style.css”导入依赖于该样式的文件中
    • 也就是现在我们不需要写style标签，只要引用文件就好了
    • image.png
    • 我们打开dist里面的网页，看到样式变化了
    • image.png

21. webpack可以使用file-loader合并文件，如图片等，现在图片也是可以导入的，即import

    • image.png
    • 上面的图片可以引入到JS中
    • 还可以作为路径引入到html标签中，作为背景图片
    • image.png
    • image.png
    • file-loader加载程序获取通过它们加载的任何文件，并将其输出到构建目录。这意味着我们可以将它们用于任何类型的文件，包括字体。

22. 数据也可以被加载

23. 可以了解一下d3

24. 多个输入，多个输出，最终我们输出的文件有app.bundle.js以及print.bundle.js，这个name就是指entry内部各个键的名称

    const path = require('path');
    module.exports = {
      entry: {
        app: './src/index.js',
        print: './src/print.js'
      },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
    };
    

25. HtmlWebpackPlugin默认会生成index.html文件，也就是如果存在这个文件，就会覆盖之前的文件，但是新生成的这个文件会将所有bundle后的文件引用到页面中

26. webpack跟踪被使用的文件，将未使用的文件自动清除，使用clean-webpack-plugin

    
    
    image.png

27. webpack的开发模式，可以使用追错的devtool

28. 可以实现自动编译，通常使用webpack-dev-server，这个插件实现了自动变异，以及网页自动刷新

29. webpack可以使用多个config文件，文件可以实现继承，使用导入以及...操作即可。