最根本的webpack手动配置（一）

最根本的webpack手动配置（一）

序：我们为什么要用webpack？

• webpack是前端工程化开发的一个具体的解决方案（早期方案：grunt，gulp）parcel也是目前主流的前端工程化解决方案之一
• 在实际的前端开发过程中，每一个开发者都应该遵循四个现代化“模块化，组件化，规范化，自动化”来使自己的代码更清晰规范，在没使用webpack之前，项目中用到的高级语法（例如es6中的）能使开发效率非常高，但浏览器可能不支持不认识这些语法，这个时候我们就需要使用打包工具进行转化解析，处理好各模块间的依赖关系，最后将其整合打包
• vue和react等主流框架项目都是基于工程化的方式进行开发的

1.什么是webpack？

概念：webpack是前端项目工程化的具体解决方案
功能：提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端javascript的兼容性，性能优化等强大的功能。

2.webpack的基本使用

1.新建一个纯英文的空白文件夹，在文件夹里打开cmd 运行 npm init -y 来初始化包管理配置文件package.json，也就是此时会自动生成一个package.json文件
2.手动新建src文件夹 在文件夹下创建index.html首页和index.js文件 （解释下为什么要创建这两个文件）
因为在webpack4.x和5.x的版本中，有默认约定：

• 2.1 默认的打包入口文件为 src -> index.js
• 2.2默认的输出文件路径为dist ->main.js
• 注意：可以在webpack.config.js中修改打包的默认约定

3.运行npm install webpack@5.42.1 webpack-cli@4.7.2 -D （安装webpack相关的两个包）
解释：webpack-cli是用于在命令行中运行webpack，cli即命令行接口（Command Line Interface）。npm install xx -S -D的意思 -S/–save会把下载的包放在package.json文件的dependencies下，表示该包无论开发还是上线后都需要使用 -D/–save-dev会把下载的包放在package.json文件的devdependencies下,表示该包只是在开发的时候需要使用
4.在根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：

//使用node.js中的导出语法，向外导出一个webpack的配置对象
 module.exports={
 mode:'development'  //mode用来指定构建模式  可选值有 development 开发模式 和production 发布模式
 }

在package.json的scripts节点下 新增dev脚本如下：

"scripts":{
  "dev":"webpack" // script 节点下的脚本，可以通过npm run 执行 这个dev的命名是自定义的 后面的webpack是固定的写法
   }

5.在终端运行 npm run dev命令，启动webpack进行项目的打包构建
运行之后在根目录下会自动生成一个dist文件夹，下面有一个main.js文件，这个文件就是webpack进行打包处理兼容（例如es6语法）之后的文件，但不会进行压缩，只有把mode改成发布模式 webpack才会帮我们进行压缩

2.2 webpack.config.js会在什么时候运行呢？

当我们执行npm run dev的时候（也就是package.json里scripts里的"dev":“webpack”） 它不会先运行 dev后面的webpack 它会先读取webpack的配置文件 也就是webpack.config.js 拿到这个配置文件的向外导出的配置选项

2.3 修改webpack4/5版本中的默认约定

在上面的webpack基本使用里第二步中我们説webpack的默认约定可以在webpack.config.js中修改，通过entry节点指定打包的入口，通过output节点指定打包的出口

const path =require('path') //导入node.js中专门操作路径的模块 导入node的模块用require 前面用常量path接收

module.exports={
  mode:'development' ,
  entry:path.join( __dirname,'./src/index.js' ),//打包入口文件的路径 这里的path是node的核心模块用来处理路径问题的 path.join拼接路径  __dirname是当前文件所在的路径，所处的目录路径
  output:{
      path:path.join(__dirname,'./dist'),//输出文件的存放路径
      filename:'bundle.js' //输出文件的名称 
  }
}

3.webpack插件的安装和使用

截止目前为止我们已经可以使用webpack工具进行基本的打包压缩等功能了，但可以使用插件扩展webpack的能力 从而让webpack使用起来更方便 插件的使用步骤分为两步：安装和配置
webpack最常用的插件有如下两个：
1.webpack-dev-server 类似node.js里用到的nodemon工具，每当修改了源代码，webpack会自动进行项目的打包和构建
下载：npm install webpack-dev-server@3.11.2 -D
配置：修改package.json ->scripts中的dev命令如下：

"scripts":{
  "dev":"webpack serve" // script 节点下的脚本，可以通过npm run 执行 这个dev的命名是自定义的 后面的webpack是固定的写法
    }

再次运行 npm run dev命令 重新进行项目的打包
注意：webpack-dev-server会启动一个实时打包的http服务器 按住ctrl+c就可以停止实时打包
2. html-webpack-plugin 是把src下的根页面index.html 复制一份到根目录下 让一访问8080就能看见 而不是点击一下src
下载： npm install html-webpack-plugin@5.3.2 -D
配置：

// 1. 导入html插件 得到一个构造函数
   
   const HtmlPlugin = require('html-webpack-plugin')
   
   2. 创建html插件的实例对象
   const htmlPlugin= new HtmlPlugin({
      template:'./src/index.html', //指定源文件的存放路径
      filename:'./index.html', //指定生成的文件的存放路径
   })
   
   module.exports={
       mode: 'development',
       plugins:[ htmlPlugin] // 3.通过plugins节点 使htmlPlugin插件生效
   }

通过html插件复制到项目根目录中的index.html页面也被存放到了内存中；html插件生成的index.html页面里自动注入了打包的bundle.js文件
3.devServer节点
在webpack.config.js配置文件中，可以通过devServer节点对 webpack-dev-server插件进行更多的配置，示例代码如下：

devServer:{
   open:true, //初次打包完成后，自动打开浏览器
   host: '127.0.0.1', //实时打包所使用的主机地址
   port:80 //实时打包所使用的端口号  在http协议中 端口号80会被默认不显示
  
}

注意：凡是修改了webpack.config.js 或者package.json文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！