Webpack

webpack在node中运行

1. 使用步骤

初始化项目 yarn init -y
安装依赖 webpack、webpack-cli
在项目中创建src目录，然后编写代码（默认主文件index.js）
执行yarn webpack对代码进行打包（打包后观察dist目录）

cli: command line interface 命令行工具
安装依赖 yarn add -D webpack webpack-cli (-d表示设置为开发依赖）
src 目录下的是遵循前端开发规范的，src 以外的要用node规范CommonJS

2. 配置文件

const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {
    }, 
    module: {
        rules: [
            {
                test: /.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

mode

设置打包的模式
none：不使用任何默认优化选项
production：生产模式
development：开发模式

entry 用来指定打包时的主文件

默认值是 ./src/index.js（一般不改，约定优于配置）
单个入口语法【最常见】 entry: string | [string]
传多个组 entry: ['./src/file_1.js', './src/file_2.js']
对象写法分别命名打包 entry: {app: './src/app.js',adminApp: './src/adminApp.js',},

output

默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中

filename: "bundle.js" 设置打包后的文件名
设置多个打包后的文件：filename: "[name].js"
clean: true 自动清理打包目录（path指定的目录），只保留当前这次打包的文件

path: "" 指定打包目录，必须要绝对路径

一般会使用Node.js中的path模块来操作文件路径
const path = require('path');	//引入path模块
path.resolve(__dirname, "dist")	//表示当前目录下的dist文件夹

3. loader

loader 让 webpack 能够去处理其他类型的文件（默认只能处理js文件），并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

使用步骤

安装对应的loader：yarn add css-loader -D
配置：
- test属性：识别出哪些文件需要被转换（使用正则表达式：/.css$/i）
- use属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象）
- type属性：加载图像资源，设置为'asset/resource'
- exclude属性：不需要转换的文件夹（正则表达式）

module.exports = {
  module: {	// 易漏点
    rules: [ 
      { test: /.css$/, use: ['style-loader','css-loader'] },
      { test: /.ts$/, use: 'ts-loader' },
      { test:/.(jpg|png|gif)$/i,type:"asset/resource" },
    ],
  },
};

css-loader 只负责打包，style-loader负责渲染生效
loader执行顺序为从后向前执行，因此user的数组顺序不能调换

4. babel

在编写JS代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性
但是我们现在希望能够使用新的特新，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码
babel就是这样一个工具，可以将新的Js语法转换为旧的JS，以提高代码的兼容性
如果希望在webpack支持babel，则需要向webpack中引入babel的loader

使用步骤

安装 npm install -D babel-loader @babel/core @babel/preset-env
babel-loader：连接webpack和babel的中间件
@babel/core：babel的转换核心
@babel/preset-env：预设环境

配置：

module: {
  rules: [
    {
      test: /.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在package.json中设置兼容列表

"browserslist": [
        "defaults"
 ]

配置参考：github.com/browserslis…

5. plugin

插件用来为webpack来扩展功能

常用插件 html-webpack-plugin

这个插件可以在打包代码后，自动在打包目录生成html页面

使用步骤：

安装依赖 yarn add -D html-webpack-plugin
引入依赖 const HTMLPlugin = require("html-webpack-plugin")
配置插件

plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",	//设置title
            template: "./src/index.html"	//模板，自动引入script脚本
        })
    ]

6. 开发服务器

安装：yarn add -D webpack-dev-server
启动：yarn webpack serve --open(--open表示启动服务器后自动打开）

配置webpack -watch执行，（在本地文件夹中访问）代码发生变化时自动更新打包

前端构建工具

Webpack

1. 使用步骤

2. 配置文件

3. loader

使用步骤

4. babel

5. plugin

6. 开发服务器