前言

ToolChain01学习开始

一、Webpack

官网：webpack

浏览器仅支持: html css 和 js 三种语言
实际开发中: 会使用到其他的一些语言, 例如 TS, sass, scss 等....
这些语言开发起来更加方便快捷, 但是浏览器不支持 -- 需要进行转换
案例: 之前书写项目时, 使用scss来书写样式, 需要live sass插件帮忙实时转换成css使用
现在: 自动化的需求 -- 书写scss之后, 能全自动转为css 引入到文件中使用
webpack的功能之一: 把scss 或 sass 等样式自动转为 css 文件

模块概念

在 node.js 中, 大量采用模块化概念
利用 require 导入其他js导出的模块
优点: 有代码提示
web开发中, 通过 <script src="js文件" 利用脚本引入js文件
缺点1: 没有代码提示
缺点2: 导入有依赖时, 必须注意引入的先后关系
webpack 把模块的概念引入到了 web的开发中

自动化的插件:

利用 babel 插件, 可以自动把 ES6语法转 ES6之前的旧语法, 兼容低版本浏览器

二、指南

官网：指南 | webpack 中文文档
新建文件夹: webpack-demo
用 npm 初始化: npm init -y

安装模块:npm i webpack webpack-cli -D

安装 lodash 模块

配置文件

// webpack.config.js  -- 固定名称
// 配置文件 -- webpack

// webpack 默认自带一些配置, 但是针对复杂的项目需要更加个性化的配置
const path = require('path');
// 大驼峰: 这是一个构造函数/类
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 以下是默认的配置信息

  // entry: 入口
  // 这里设定了 webpack 要转换的文件
  // entry: './src/index.js',
  // entry: './src/demo.js',

  // 多入口:
  entry: {
    // 入口名称(name) : 对应的文件
    my_index: './src/index.js',
    my_print: './src/print.js',
    // name: value
  },

  // output: 出口
  // 设定 编译完毕的文件 存放在哪里
  output: {
    clean: true, // 先清理之前遗留的文件, 再生成新的
    // 多出口
    // [name] 代表当前导出的 入口文件的名字
    filename: '[name].bundle.js',

    // 此语法是针对单个入口
    // filename: 'bundle.js', // 导出的文件名
    path: path.resolve(__dirname, 'dist'), // 存放的目录路径
  },
  // 模式: 有两个可选值
  // development : 开发模式 -- 导出的文件内容 有注释 有格式
  // production : 产品模式 -- 导出的文件内容 带有代码压缩
  mode: 'development',
  // mode: 'production',

  // 加载器 loader 的设置
  module: {
    // 使用规则
    rules: [
      {
        // 正则验证
        test: /\.css$/i, // 忽略大小写, 如果是 .css 结尾的
        // 使用两个loader 依次加载
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|svg|gif|jpeg)$/i,
        // 类型: 资源类型;  以下内容是固定的配置项
        type: "asset/resource", //按照资源类型处理
      },
      {
        // 配置文件的修改, 必须重启服务器才能生效
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }, {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ]
  },
  // 开发服务器
  // 在 package.json 中配置启动服务器的命令 
  devServer: {
    // 指定服务器运行后, 访问的静态目录地址
    static: './dist'
  },

  // 插件的用法
  plugins: [
    new HtmlWebpackPlugin({ title: "自动生成" })
  ]
};

// webpack命令的执行方式:
// 方式1: npx webpack    利用npx工具 执行webpack模块
// -- 不推荐 -- 直接调用node_modules 中的模块

// 方式2: 利用 npm 指定的 package.json 来配置调用方式
// -- 使用 npm run build 命令
//   告知项目包, 触发 build 脚本中的代码
// run: 运行
// build: package.json中的脚本名

index.js

// node.js 提供的模块化操作, 引入lodash 模块

// 这是 JS 独有的模块化引入语法
// const _ = require('lodash')   // 方言

// ES6中: 提供了新的引入写法 -- 与其他编程语言的写法统一
import _ from 'lodash'  // 普通话


// 默认仅支持 JS 文件的导入; 其他的非JS文件也会当做是JS来解析
// loader: 加载器 -- 负责加载非 JS 格式的文件
// 安装 开发时使用的 出来 内联样式 和 css 文件的加载器
// npm i -D style-loader css-loader
// 通过配置文件, 告知 webpack   .css 结尾的文件用特殊加载器.
import './my.css'

// 需要专门的loader 进行加载
// https://webpack.docschina.org/loaders/sass-loader/
// npm install sass-loader sass webpack --save-dev
import './my.scss'

// 必须单独配置加载器
// webpack默认内置了 图片的加载器, 可以直接用
import bigskin from './bigskin-1.jpg';

// 开发服务器:
// 功能类似 live server 插件
// 自动检测代码中的修改 然后 自动编译 并 刷新网页
// npm i -D webpack-dev-server
// 在配置文件中, 进行相关配置

function component() {
  // 新建 div 元素
  const element = document.createElement('div');

  element.className = 'ok'

  // 传统的web开发中遭遇的问题: 
  // _ 是什么??  哪来的??  做什么的??
  // element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  // node.js 提供的模块化特色:  让代码有提示
  element.innerHTML = _.join(['Hello', 'Webpack'], ' ')

  return element;
}
document.body.appendChild(component());

// 新建图片元素
var icon = new Image(200, 100)
icon.src = bigskin
document.body.appendChild(icon)

// ES6 语法:
// 2015年6月 出品, 即在这个时间点前的浏览器版本不支持此语法
// 此时如果代码要兼容这些旧版本浏览器, 则必须把ES6语法转为普通的旧语法
// babel loader: 负责自动转换语法的 加载器

// https://webpack.docschina.org/loaders/babel-loader/
// npm install -D babel-loader @babel/core @babel/preset-env webpack
class Emp {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

// 加载 sass 或 scss 文件
// 尝试自己阅读 loader 部分, 找到对应的加载器

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>起步</title>
  <!-- lodash 脚本中提供了 _ 变量, 其中包含很多实用的 JS 方法 -->
  <script src="https://unpkg.com/lodash@4.17.20"></script>
  <script src="./src/index.js"></script>
  <!-- 
    传统的脚本开发的痛点:
    1. 没有代码提示
    2. 当在外部JS文件中, 使用到其他js文件中的代码时, 毫无依据, 无法查找
    3. 脚本间有依赖关系, 则必须注意引入顺序 -- 然后从表面 根本无法看出脚本的依赖关系

    此时: webpack 出现
    - 开发时可以通过 node.js 平台提供的模块化特征来进行代码书写
    - webpack 可以把 node.js 书写的代码 转为 普通的 js 代码

    node.js 和 浏览器 属于两个独立的平台, 其中的特性本身不互通
    webpack 可以打通差异, 实现代码的自动转换
   -->
</head>

<body>

  <script>
    console.dir(_)

    var wd = _.join(['你', '好'], '---')
    console.log(wd);
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 模块化的语法, 是node.js平台专属的; 浏览器不支持 -->
  <!-- webpack: 负责转换 -->
  <!-- 转换命令: npx webpack -->
  <!-- npx: 会执行当前项目包中 node_modules 下的 webpack模块 -->
  <!-- 自动把 src/index.js 文件, 转换成普通的 浏览器支持的文件, 存储在 dist/main.js 中 -->
  <!-- <script src="./src/index.js"></script> -->
  <script src='./main.js'></script>

  <!-- dist目录: 应该存放编译出来的 可以运行的代码 -->
</body>

</html>