什么是webpack

Webpack 是一个现代的 JavaScript 应用程序静态模块打包器（module bundler），它将许多文件视为一个整体，通过分析模块之间的依赖关系，最终将它们打包成一个或多个静态资源文件，如 JavaScript、CSS、图片
Webpack 可以实现以下功能
- 代码转换：将 ES6、TypeScript等高级语言转换为浏览器可识别的低级语言
- 文件优化：通过代码压缩、图片压缩、文件合并等方式来减小文件体积，加快页面加载速度
- 模块合并：将多个模块合并为一个文件，减少 HTTP 请求的数量
- 依赖管理：通过分析模块之间的依赖关系，自动加载所需的依赖模块
- 插件扩展：通过插件扩展功能，满足不同项目的需求
Webpack-cli
- webpack官方提供的一个命令行工具，用于在终端中执行webpack打包操作
- Webpack-cli 命令行工具提供了多种指令，可以用于打包、编译、生成配置文件、构建多页应用等
安装

npm install webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin cross-env mini-css-extract-plugin less less-loader postcss postcss-loader autoprefixer @babel/core @babel/preset-env babel-loader typescript ts-loader @babel/preset-typescript eslint eslint-webpack-plugin eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node @typescript-eslint/eslint-plugin --save

webpack打包

entry

entry 选项用于指定webpack打包的入口文件，告诉webpack从哪个文件开始打包
entry 可以配置为一个字符串，一个数组或者一个对象
- 如果配置成一个字符串，表示入口文件是一个单独的文件，webpack将以该文件作为入口打包所有的依赖模块
- 如果配置成一个数组，表示入口文件有多个，webpack将以数组中的文件作为入口打包所有依赖模块
- 如果配置成一个对象，表示入口有多个且需要命名，webpack将根据对象中的键名生成多个入口文件

module.exports = { 
mode:'development', 
devtool:false, 
entry: './src/index.js', 
/* entry: ['./src/entry1.js','./src/entry2.js'], 
entry:{ app: './src/index.js', } 
*/ };

output

output 选项用于指定webpack打包后输出的文件和路径，告诉webpack打包后的文件应该放到哪个目录下及如何命名
output 通常配置为一个对象，包含了多个属性
- path 指定了打包后的输出路径，必须为绝对路径
- filename 指定打包后的文件名，可以包含路径信息

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

loader

webpack中的loader（加载器）用于对模块进行转换
webpack将一切文件视为模块，但只有js模块才能被直接运行和使用
loader可以将非js模块（如css，图片等）转换为webpack可以处理的有效模块

loader简单使用

test 指定匹配文件类型
use 指定转换方式
exclude 用于指定哪些文件或目录不应该被loader处理
css-loader 将css代码转换为js代码，可以识别@import和url() 等语句，实现css模块的引用和解析
style-loader 将css-loader转换后的js对象，以style标签的形式动态插入到HTML文件中

const path = require('path'); 
module.exports = { 
mode:'development', 
entry: './src/index.js', 
output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' },
module: { 
    rules: [{ test: /\.css$/, use: ['style-loader','css-loader']}]} 
};

插件（html-webpack-plugin插件为例）

插件是一种用于扩展webpack功能的机制，通过插件可以在webpack打包过程中执行额外的任务和进行优化
html-webpack-plugin是webpack中用于生成html文件的插件，可以根据模板生成html文件，并自动将打包后的js，css文件引入到html文件中
title指定了html文件的标题
template指定了html文件的模板路径，使用该模板生成html文件

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { 
mode:'development', 
entry: './src/index.js', 
output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' },
module: { 
    rules: [{ test: /\.css$/, use: ['style-loader','css-loader']}]} 
};
plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
]

webpack-dev-server

webpack-dev-server是一个基于Express的web服务器，它可以为webpack打包后的代码提供一个本地开发环境，支持实时刷新，热替换和自动构建等功能，大大提高了开发效率

static：静态资源目录的路径，设置该参数可以在服务器中访问这些静态资源
compress：启动gzip压缩，默认是关闭的
port：服务器端口
host：服务器主机名
open: 是否自动在浏览器打开页面，默认关闭
hot：模块热替换功能，默认关闭
watchFiles：需要监听的文件列表，当这些文件变化时，自动重启服务器
historyApiFallback：参数用于设置是否启用 HTML5 历史记录 API，用于处理单页应用的路由问题。默认情况下，当使用浏览器的前进/后退按钮时，devServer 会尝试根据 URL 路径查找对应的静态资源，如果找不到就返回 404。如果启用了 historyApiFallback，则会将这些请求重定向到 index.html，然后交给前端路由来处理

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
    mode:'development', 
    entry: './src/index.js', 
    output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' },  
    devServer: { 
        static: path.join(__dirname, 'public'), 
        compress: true,
        host:'localhost', 
        port: 9000, 
        open:true, 
        hot:true, 
        historyApiFallback: true, 
        watchFiles:["src/**/*.js", "src/**/*.css"]
    },
    module: { 
        rules: [ { test: /\.css$/, use: ['style-loader','css-loader']} ] 
    }, 
    plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] 
};

webpack的使用

什么是webpack

webpack打包

entry

output

loader

loader简单使用

插件（html-webpack-plugin插件为例）

webpack-dev-server