Webpack打包工具详解

缺乏、安全感 2022-12-22 04:44 236阅读 0赞

## 什么是Webpack? ##

webpack是一种前端资源构建工具 一个静态模块打包器  
在webpack看来 前端所有资源文件都会作为模块处理  
他将根据模块的依赖关系进行静态分析 打包生成对应的静态资源

## webpack 解决什么问题？ ##

Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。

## webpack的特点 ##

1、模块化；2、Tree shaking；3、代码懒加载  
**webpack的核心概念：**  
1. entry 入口文件 // 好比main.js  
2. output 出口文件 // 好比dist 打包之后的文件夹  
3. plugin 插件 // 自动生成html文件等插件  
4. loader 转换器 // sass less 转换成我们想要的文件类型  
5. dev-serve 服务器 // 使我们webpack在本地运行 服务  
6. mode 模式 // 可以切换开发环境 和 生成环境

## 安装webpack ##

**1.确认 当前环境有没有 webpack -v**

> win+r cmd 到全局环境 使用webpack -v查看

**2.在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]  
**3.创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]  
**4.src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的div**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 2]  
**5.打包在命令框**  
使用指令在命令框打包

> webpack src/main.js --output src/bundle.js

**这样打包太过麻烦我们创建一个webpack.config.js**  
在里面定义webpack打包的属性

具体写法

**运行webpack命令就可以进行打包**  
**4.建立本地服务器**

> cnpm i webpack-dev-server -D

**在webpack.json 里的scripts里面设置热更新跟启动端口**

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
    // 热更新 设置端口自启动
        "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot" 
      },

**6.npm run dev 运行即可**

## Webpack如何转译less sass ##

**1.在命令框输入**

> cnpm i node-sass sass-loader style-loader css-loader -D

**2.在webpack.config.js 配置 规则**

const path = require("path")
    module.exports = { 
        entry: "./src/main.js", // 入口
        output: { 
            filename: "bundle.js",// 输入的文件名字使用入口文件的名字
            path: path.resolve(__dirname, "dist")   // 调用path模块
        },
        modules: { 
            rules: [
                //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载 
                { 
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                }
            ]
        }
    }

最后npm run dev 启动即可

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/072e59a3ca184985919d9eef06a34578.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d8df092aedce4989aeadb74bd29b54b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/c0f8c3af3733414c925cf48266f067b2.png