webpack 的简介,五个核心概念_webpack是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_50384924/article/details/117752593

一. webpack简介

webpack是什么
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 简单来说,webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言(例如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用
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)

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

二. webpack 初始化

初始化配置
- 初始化 package.json
  指令: npm init
- 下载安装 webpack:
  全局安装: npm i webpack webpack-cli -g
  本地安装: npm i webpack webpack-cli -D
  检测是否安装:webpack -v
  注意点: webpack4 以上的版本需要全局和本地都安装 webpack-cli
编辑打包应用
- 在文件夹中创建一个 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. 先运行:
  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'
}

安装 style-loader , css-loader
安装 style-loader 指令:npm i style-loader -D
安装 css-loader 指令: npm i css-loader -D
打包
使用 webpack 指令进行打包
sass-loader
在index.js中引入在 src 文件夹中创建的index.scss
设置loader
安装 sass-loader和sass
npm i sass-loader -D
npm i sass -D
打包
执行指令: webpack