webpack 静态模块打包工具

webpack

为什么?

把静态模块内容，压缩，整合，转译等(前端工程化)

• 把less/sass转成css代码
• 把ES6+ 降级成ES5
• 支持多种模块文件类型，多种模块标准语法

vite

为什么不直接学习vite 而学习webpack

因为很多项目还是基于webpack来进行构建的，所以还要掌握webpack

案例：封装utils包，校验用户名和密码长度 ，在index.js种使用，使用webpack打包

步骤：

1.新建项目文件夹，初始化包环境

2.新建src源代码文件夹(书写代码)

3.下载webpack webpack-cli 到项目(版本独立)

4.项目种允许工具命令，采用自定义命令的方式(局部命令)

5.自动产生dist分支文件夹(压缩和优化后，用于最终运行的代码)

总结：

在package.json中自定义命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

如何运行package.json 里的自定义命令

npm run 自定义命令

修改webpack打包入口和出口

步骤:

1.项目根目录，新建webpack.config.js配置文件

2.导出配置对象，配置入口，出口文件路径

//webpack.config.js
const path = require('path')

module.exports={
    // 入口
    entry:path.resolve(__dirname,'src/main.js'),
    // 出口  path 路径  filename 文件名
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'my-first-webpack.bundle.js'
    }
}

自动生成html文件

HtmlWebpackPlugin 简化了 HTML 文件的创建

步骤:

1.下载本地软件包

2.配置webpack.config.js让webpack拥有插件的功能

3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源

 plugins:[new HtmlWebpackPlugin({
        // 以指定的html文件为生成模板
        template:path.resolve(__dirname,'public/index.html')
    })]

打包css模块

注意:webpack默认只识别js和json文件内容

加载器 css-loader 解析css代码

加载器style-loader 把解析后的css代码插入到DOM

步骤:

1.准备css文件导入到src/main.js中 (压缩转移处理)

2.下载css-loader 和style-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包less模块

加载器 less-loader 把less代码编译为css代码，还需要依赖less软件包

步骤:

1.准备less样式导入到src/main.js中 (压缩转移处理)

2.下载less 和less-loader本地软件包

3.配置webpack.config.js 让webpack拥有该加载器功能

4.打包后运行dist/index.html

打包图片

webpack5 内置了资源模块的打包，无需下载额外的loader

步骤:

1.准备图片素材到src/assets中

2.在index.less中给body添加背景图

3.在main.js中给img标签添加logo图片

4.配置webpack.config.js 让webpack拥有该加载器功能

5.打包后运行dist/index.html