webpack的基本使用

1.2、webpack的基本使用

1、什么是webpack

概念: webpack是前端项目工程化的具体解决方案。

主要功能:它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。

注意:目前企业级的前端项目开发中，绝大多数的项目都是基于webpack进行打包构建的。

2、创建列表隔行变色项目

①新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json

②新建src 源代码目录

③新建src -> index.html首页和src -> index.js脚本文件

④初始化首页基本的结构

⑤运行npm install jquery -S命令,安装jQuery

⑥通过ES6模块化的方式导入jQuery,实现列表隔行变色效果

3、在项目中安装webpack

在终端运行如下的命令,安装webpack相关的两个包:

npm install webpack@5.5.1 webpack-cli@4.2.0 -D 

4、在项目中配置webpack

1. 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置:

module.exports = {
	mode: 'development'   // mode用来指定构建模式。可选值有development 和production
}

2. 在package.json的scripts 节点下，新增dev脚本如下:

"scripts": {
	"dev": "webpack" // script 节点下的脚本，可以通过npm run 执行。例如npm run dev
}

3. 在终端中运行npm run dev命令，启动webpack进行项目的打包构建

4. mode的可选值：

   • development
     • 开发环境
     • 不会对打包生成的文件进行代码压缩和性能优化
     • 打包速度快，适合在开发阶段使用
   • production
     • 生产环境
     • 会对打包生成的文件进行代码压缩和性能优化
     • 打包速度很慢，仅适合在项目发布阶段使用

5、webpack.config.js文件的作用

webpack.config.js 是 webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件.从而基于给定的配置，对项目进行打包。

注意:由于 webpack是基于node.js 开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行 webpack的个性化配置。

6、webpack中的默认约定

在webpack中有如下的默认约定:

• 默认的打包入口文件为src -> index.js
• 默认的输出文件路径为dist -> main.js

注意:可以在 webpack.config.js 中修改打包的默认约定

7、自定义打包的入口和出口

在webpack.config.js 配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。示例代码如下:

const path = require('path')   //导入 node.js中专门操作路径的模块

    //打包入口文件的路径
    entry: path.join(__dirname,'./src/index.js '),
    //指定打包的出口
    output: {
        //输出文件的存放路径
		path: path.join(__dirname,'./dist'),
        //输出文件的名称
        filename:'bundle.js ' 
	}

1.3、webpack中的插件

1.webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack 用起来更方便。最常用的webpack插件有如下两个:

• webpack-dev-server
  • 类似于node.js阶段用到的nodemon工具
  • 每当修改了源代码，webpack 会自动进行项目的打包和构建
• html-webpack-plugin
  • webpack中的HTML插件（类似于一个模板引擎插件)
  • 可以通过此插件自定制index.html页面的内容

2. webpack-dev-server

• 运行如下的命令，即可在项目中安装此插件:

  npm install webpack-dev-server@3.11.0 -D
  

• 配置webpack-dev-server

  • 修改package.json -> scripts中的dev命令如下:

      "scripts": {
        "dev": "webpack serve" //script节点下的脚本，可以通过npm run执行
      },
    

  • 再次运行npm run dev命令，重新进行项目的打包

    如果报错，运行npm i webpack-cli

  • 在浏览器中访问http: //localhost:8080地址，查看自动打包效果

打包生成的文件去哪里了？

• 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上
  • 严格遵守开发者在webpack.config.js 中指定配置
  • 根据output节点指定路径进行存放
• 配置了webpack-dev-server之后，打包生成的文件存放到了内存中
  • 不再根据output节点指定的路径，存放到实际的物理磁盘上
  • 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

生成到内存中的文件该如何访问？

webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

    <!-- index.js存在兼容性问题 -->
    <!-- <script src="./index.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <script src="/bundle.js"></script>

两次Ctrl+C结束自动打包

3.html-webpack-plugin

html-webpack-plugin 是 webpack 中的HTML插件，可以通过此插件自定制index.html页面的内容。

需求:通过html-webpack-plugin插件，将src目录下的 index.html首页，复制到项目根目录中一份!

1. 安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件:

npm install html-webpack-plugin@4.5.0 -D

2. 在webpack-config-js中配置html-webpack-plugin

// 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 插件生效
}

3. html-webpack-plugin原理

• 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中
• HTML插件在生成的index.html页面的底部，自动注入了打包的 bundle.js 文件

4. 开启的实时打包功能，就可以直接删除dist目录

4.devServer节点

在webpack.config.js 配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下:

devServer: {
	open: true,          //初次打包完成后，自动打开浏览器
	host: '127.0.0.1',   // 实时打包所使用的主机地址
    port: 80,            //实时打包所使用的端口号
}

1.4、webpack中的loader

1.loader概述

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack 默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!

loader加载器的作用:协助webpack打包处理特定的文件模块。比如:

• css-loader 可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• babel-loader可以打包处理webpack无法处理的高级JS语法

2.loader的调用过程

3.打包处理css文件

1. 运行npm i style-loader@2.0.0 css-loader@5.0.1 -D命令，安装处理css文件的loader

2. 在webpack.config.js 的 module -> rules数组中，添加loader 规则如下:

   module: { //所有第三方文件模块的匹配规则
   	rules: [ //文件后缀名的匹配规则
   	{ test: /\.css$/, use: ['style-loader','css-loader'] }
   	]
   }
   

   其中，test表示匹配的文件类型, use表示对应要调用的loader

注意:

use数组中指定的 loader顺序是固定的

多个loader的调用顺序是:从后往前调用

4.打包和处理less文件

1. 运行npm i less-loader@7.1.0 less@3.12.2 -D 命令

2. 在webpack.config.js的module -> rules数组中，添加loader规则如下:

   module: { //所有第三方文件模块的匹配规则
   	rules: [ //文件后缀名的匹配规则
   	{ test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },
   	]
   }