第二节:Webpack核心概念与安装使用

1. Webpack的核心概念

1.1 核心概念说明:

1.1.1 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块(文件)，作为构建其内部依赖图的开始

说明:

1. 在webpack构建时,会先找到入口文件,
2. 然后在入口文件中无找到需要直接或间接依赖的模块
3. webpack将每个依赖进行处理,最后出入构建后的结果

例如:

module.exports = {
  entry: 'index.js'
}

1.1.2 出口(output)

Output: 输出指示,告诉Webpack打包好的资源bundles输出到哪里去,以及如何命名输出的文件

例如:

module.exports = {
    entry : 'index.js',
    output: {
        filename: 'handle.js', // 配置导出的文件名
        path: resolve(__dirname,'dist')  // 将打包后的文件放在哪个文件夹中
    }
}

1.1.3 Loader 处理文件

Webpack核心只能处理JavaScript已经JSON资源文件, 非JS文件Webpack只能交给Loader处理

通过来说就是通过loader将webpack不能是被的文件转成webpack能识别的模块

例如:

module.exports = {
    module: {   // module
        rules: [  // 规则
            {
                 // 正则匹配
                test: /\.css&/,  

                // 使用css-loader,将css转成js能识别的模块
                use: 'css-loader'  
            }
        ]
    }
}

1.1.4 Plugin 插件

Plugin插件,可以用于执行范围更广的任务.插件的范围包括从打包优化,压缩,到重新定义环境变量.

通俗的来了解,插件就是对于webpack功能的扩展

例如:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin();
    ]
}

1.1.5 Mode模式

Mode 模式, 用来告诉Webpack在不同的模式下使用不同的配置,主要有开发模式和生产模式

对于核心的概念现有一个初步的认识,后面会大量的讲解和使用

1.2 Model 模式的了解

Mode模式用于指定Webpack打包使用相应模式的配置

选项	描述	特点
development	会将process.env.NODE_ENV的值设置为development	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV的值设置为production	能让代码优化上下运行的环境

简而言之,

1. 开发环境development,为了本来调试不会对打包后的代码进行压缩
2. 生产环境production,为了上线的性能,会将打包后的代码进行压缩

2. Webpack安装

2.1 Webpack安装

全局安装

$ npm install -g webpack webpack-cli

局部安装

注意局部安装 将webpack安装到开发依赖中

$ npm install webpack webpack-cli --save-dev

2.2 webpack和webpack-cli介绍

2.2.1 介绍

webpack3中webpack-cli是合在webpack中。所以在安装webpack3版本的时候,

只需要安装下面的命令就可以了

## webpack3 安装方式
$ npm install -g webpack

webpack4.0 以后，执行方式就发生了改变，不再是 webpack 一波流，而是多了一个 webpack-cli。所以安装时两个都需要安装

2.2.2 两者之间的关系

1. webpack是webpack的核心代码

2. webpack-cli是提供webpack命令

3. webpack的简单使用

使用Webpack对模块化文件进行打包

3.1 对于webpack打包命令的了解

语法使用

$ webpack <entry> <output>

例子

$ webpack index.js bundle.js

命令的意思,是将index.js作为打包的入口开始打包,打包后的文件叫做bundle.js

3.2 定义模块

image

3.2 通过webpack命令打包

[图片上传失败...(image-ffa543-1656769434927)]

3.4 打包后的文件

image

3.5 显示结果

image

总结:

1. webpack 只能处理js/json资源,不能处理img/css等其他资源
2. 生产环境和开发环境将模块化编译成浏览器能识别的模块化
3. 生产环境比开发环境多一个压缩js带代码的功能