53 webpack概念、webpack核心介绍、webpack使用

2024-01-23 20:28:40

53 webpack概念、webpack核心介绍、webpack使用

webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。

开发环境：我们本地的环境或测试环境 development

生产环境：线上环境，比如：我们昨天讲的环境部署 production

为什么学习webpack

搭建前端开发环境（vue、react）、热更新、代码压缩等

但是webpack又依赖node环境。

node你接口不会写。你会安装node即可。

学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务

webpack官网

https://www.webpackjs.com/

准备工作

1、先安装node

2、安装webpack和webpack-cli

npm i webpack@4 webpack-cli@3 -g

webpack核心介绍

配置文件:webpack.config.js

注意：写js代码，同时webpack基于node，所以也可以写node相关的代码（不是写http服务）。最多用上：path、和commonjs规范

键名	概念	解释
context	入口起点	基础目录，绝对路径，用于从配置中解析入口起点(entry point)
entry	入口 (必须)	配置打包入口文件的名字
output	出口 (必须)	打包后输出到哪里, 和输出的文件名
module	加载器配置	在rules对应数组中, 定义对象规则
plugins	插件配置	配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件）

webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理

webpack有很多的插件。插件就是丰富webpack功能的。比如：压缩js

webpack使用

打包js代码

1、单入口单出口（主流）

/*
    webpack依赖node环境 。
    这个js文件中，写的虽然是js。但是所有的node相关的都可以写。

*/ 
const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
        filename:'bundle.js',//打包后生成的文件名
    }
}

//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）

2、多入口单出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:['./main.js','./test1.js'],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

3、多入口多出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:{
        first:'./main.js',
        second:'./test1.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}

打包css

webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）

module属性。

讲这个案例的目的：

1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求。

2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies：开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。

dependencies：项目依赖，无论上线还是开发阶段都需要，

module: {
    rules: [ 
        { 
            test: /\.css$/, 
            use: [ 'style-loader', 'css-loader' ]
        }
    ]
}

分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

打包less

需要安装less 和 less-loader 来解析less代码, 和加载less文件
```
npm i less@3 less-loader@7 -D
```

在webpack.config.js中配置加载器, 解析.less文件

{ 
	test: /\.less$/, 
	use: ['style-loader', 'css-loader', "less-loader"]
}

但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码

{ 
	test: /\.less$/, 
	use: ExtractTextPlugin.extract({ 
		fallback: "style-loader", 
		use: ['css-loader', "less-loader"]
	})
}

观察打包后style.css中多了less文件里的样式代码

生成html

html-webpack-plugin插件。

下载

npm i html-webpack-plugin@4 -D

注意：插件需要显示的引入到webpack.config.js中

plugins属性

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            title: "webpack 的使用",
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

报错说明

Cannot find module "webpack/lib/node/NodeTeplatePlugins"

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

npm i webpack@4 -D

处理css中的资源（图片和字体）

我们的背景图片和自定义图标放在src的assets文件夹下。html中引入的图片：logo放置在static文件夹下（不需要打包，它只是copy一份）。

需要下载2个加载器模块
- url-loader、file-loader

下载：

npm i url-loader file-loader -D

注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)

2.webpack.config.js加载器配置:

在module中加上此配置。

 {
       test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
        use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

使用jquery（面向模块化开发）

在webpack打包的项目中, 使用jQuery功能

下载jquery模块,

npm i jquery
在main.js中引入jquery,

import $ from 'jquery'

热更新

webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录
webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页
- 下载webpack-dev-server -g
- npm i webpack-dev-server -g
- webpack-dev-server --version
在项目下运行命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。
注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包
注意: 默认需要打包输出的文件名必须为 index.html文件
默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问
当开发完毕还需要使用webpack命令进行打包到dist目录。

webpack.config.js配置：

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}

码农公寓