webpack学习(一)webpack第一个项目的构建&基础知识&webpack.config.js构建&webpack构建命令的流程

一、基础知识

webpack是基于node来进行构建的，node中的语法也是可以使用的。

首先创建一个文件项目为webpack-study项目
再创建 src文件
创建 dist文件 dist文件夹存放发布产品级别的源代码.

npm

使用npm 初始化项目
打开当前项目目录下的终端
输入命令 npm init -y

在这里插入图片描述
再安装当前你需要的包我这里需要Jquery

	在终端输入命令安装Jquery : npm i jquery -S

在这里插入图片描述
当前项目目录变成这样:

因为当前的 import $ from ‘jquery’ 这个ES6语法不能被浏览器识别，所以会报错。
这就要使用webpack这个前端构建工具。将main.js中的内容输出到blundle.js中去。

查看当前webpack版本命令: webpack -v

在这里插入图片描述

将当前的main.js输出到bundle.js中去(webpack打包命令):

4.0以后命令是 需要这样 : --output-filename和--output-path

3.0：webpack ./src/main.js ./dist/boundle.js

4.0：webpack --mode production src/main.js --output-filename bundle.js --out-path dist

在这里插入图片描述
这个时候就将main.js打包到了目录dist下的bundle.js中去了。

使用示例代码:

在这里插入图片描述
上面的例子说明 webpack可以解决什么问题?

1.webpack能够处理js文件的相互依赖关系，我们只需要在一个文件中引入一个main.js就可以使用了。
2.webpack能够处理高级的JS语法，把高级的浏览器不识别的语法转换成低级的浏览器能够识别的语法。

二、使用webpack.config.js进行构建

在项目中，不想写那么多命令就是用webpack.config.js文件进行构建。

在主目录下新建:webpack.config.js

在这里插入图片描述

webpack.config.js代码:

//使用配置文件后 构建命令就是 webpack了 手动写出来

const path = require('path')

// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那个文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件输出到那个目录中去
        filename: 'bundle.js' //这是指定输出文件的名称
    }

    
}

在终端使用 webpack命令打包命令: webpack
在这里插入图片描述

但是这里出现了黄色警告: 当前版本是4.35,说是没有配置webpack模式是生产环境还是开发环境

解决方案:
在webpack.config.js 里面配置下生产环境或开发环境
代码如下:

//使用配置文件后 构建命令就是 webpack了 手动写出来

const path = require('path')

// 这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
module.exports = {
    // 配置webpack 生产环境 development  和开发环境 production
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那个文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件输出到那个目录中去
        filename: 'bundle.js' //这是指定输出文件的名称
    }

    
}

注意:
开发环境的需求:
模块热更新
sourceMap
接口代理
代码规范检查

生产环境的需求
提取公共代码
压缩混淆
文件压缩/base64编码
去除无用的代码

二者共同点:
同样的入口
同样的代码处理(loader处理)
同样的解析配置

三、webpack构建命令的流程

当我们在控制台直接输入webpack命令执行的时候webpack做了以下几步：
1.当我们在控制台直接输入webpack命令执行的时候，首先webpack发现我们并没有
通过命令的方式给它指定的入口和出口
2.webpack就会去项目的根目录中去查找一个叫做 webpack.config.js的配置文件
3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到配置文件
中导出的配置文件。
4.当webpack 拿到这个配置文件对象后，就拿到了配置对象中的指定的入口和出口然后进行打包构建。