webpack 的简介,五个核心概念

一. webpack简介

1. webpack是什么
   webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 简单来说,webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(例如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
2. webpack 五个核心概念
   • entry
     入口:指示 webpack 以那个文件为入口起点开始打包,分析构建内部依赖图
     
   • output
     输出: 指示 webpack 打包后文件的名称和位置
     
   • loader
     • loader:让 webpack 能够去处理那些非 JS 的文件,比如样式文件,图片文件(webpack 自身只理解JS)(后面会有详细的介绍)
     • 常见的Loader,以及他们是解决什么问题的

ile-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码

	**注意点**:使用webpack打包样式资源需要用到比较多的loader，而且这些loader的顺序不能乱，**遵循从右到左、从下到上的解析规则**。
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20210609194729548.png#pic_center)

4. plugins
   插件:可以用于执行范围更广的任务.插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
   目的:在于解决loader无法实现的其他事
5. mode
   模式(mode):指示 webpack 使用相应的配置(开发环境和生产环境)
   development(开发环境):能让代码本地调试运行的环境
   production(生产环境):能让代码优化上线运行的环境

二. webpack 初始化

1. 初始化配置
   • 初始化 package.json
     指令: npm init
   • 下载安装 webpack:
     全局安装: npm i webpack webpack-cli -g
     本地安装: npm i webpack webpack-cli -D
     检测是否安装:webpack -v
     注意点: webpack4 以上的版本需要全局和本地都安装 webpack-cli
2. 编辑打包应用
   • 在文件夹中创建一个 src 文件夹,src 创建完成后,然后在 src 下创建一个js 等文件后,不需要配置 webpack.config.js 文件,在命令行就可以编译打包
   • 指令
     • 开发环境: webpack ./src/index.js -o ./build/built.js --mode=development
       webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是开发环境
     • 生产环境: webpack ./src/index.js -o ./build/built.js --mode=production
       webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 整体打包环境，是生产环境
     • 注意点: 引入样式文件 webpack不能处理
     • 总结:
       • webpack 本身能处理 js/json 资源,不能处理 css/img 等其它资源
       • 生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化,但是不能处理 ES6 的基本语法转为 ES5 (需要借助 loader)
       • 生产环境比开发环境多一个压缩 js 代码

三. webpack 开发环境的配置

1. webpack.config.js

• 介绍:webpack.config.js 是 webpack 的配置文件
• 作用:指示 webpack 干什么 (当你运行 webpack 指令时,会加载里面的配置)
• 所有构建工具都是基于 node.js 平台运行的,模块化默认采用 common.js

2.开发环境的配置有以下几个方面

1. 打包样式资源
   步骤:

   1. 先运行:
      npm init
      npm i webpack webpack-cli -D
      步骤:

   2. 在src 目录下新建一个css文件夹,在里面新建一个 index.css 文件
      index.css:
      
      现在的目录如下:
      

   3. 然后在src里面创建一个index.js,引入刚才新建的 css 文件
      

   4. 配置 webpack.config.js
      因为css样式文件的后缀是.css，所以需要使用到style-loader、css-loader进行解析
      webpack.config.js:

// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
    // webpack配置
    // 入口起点
    entry:"./src/index.js",
    
    // 输出
    output:{  // 打包后文件的名称和位置
        // 输出文件名
        filename:'built.js',
        // 输出路径
        // _dirname 是node.js的变量,代表当前文件的目录路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            // 详细loader配置
            // 不同文件必须配置不同loader处理
            {
                // test 是配置哪些文件
                test:/\.css$/,     // .css 结尾的文件
                // use数组中loader执行顺序,从右到左,从下到上,依次执行
                use:[
                    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串 (样式资源)
                    'css-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins的配置
    ],
    // 模式
    mode:'development',   // 开发模式
    // mode:'production'
}

5. 安装 style-loader , css-loader
   安装 style-loader 指令:npm i style-loader -D
   安装 css-loader 指令: npm i css-loader -D

6. 打包
   使用 webpack 指令进行打包
   

7. sass-loader
   在index.js中引入在 src 文件夹中创建的index.scss
   

8. 设置loader
   

9. 安装 sass-loader和sass
   npm i sass-loader -D
   npm i sass -D

10. 打包
    执行指令: webpack
    

总结:

今天学习了包括 webpack 是干什么的,webpack的五个核心概念,还有它的初始化配置,和开发环境配置之一的打包样式资源,以上就是我今天的学习总结