webpack 详细文档说明
2021-10-28 本文已影响0人
coderhzc
一.webpack五个核心概念
1. Entry: 入口指示webpack以哪个文件为入口起点开始打包，分析构建内部的依赖图。
2. Output: 输出指示 webpack打包后的资源bundles输出到哪里去，以及如何命名。
3. Loader：让Webpack能够去处理那些非JavaScript文件(webpack 自身只理解JavaScript)
4. Plugins: 插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5. Mode: 模式指示webpack使用相应模式的配置
-- 1. devolopment 开发模式
能让代码本地调试运行环境
--2. production 生产模式
能让代码优化上线运行的环境
二.webpack 全局安装
在对应的文件夹中打开 终端命令 执行以下命令:
1 npm init
2 npm i webpack webpack-cli -g 全局安装
查看webpack版本信息
webpack --version
实际截图
image.png
三.webpack 局部安装
1. npm init 或者 npm init -y (直接就创建出来了)
实际截图
image.png
image.png
局部安装:
2.1 npm i webpack webpack-cli --save--dev (开发阶段的安装依赖)
简写方式:npm i webpack webpack-cli -D (开发阶段的安装依赖)
2.2 npm i webpack webpack-cli (生产阶段的安装依赖) 默认就是生产阶段的安装
2.3 局部的webpack打包的两种方式:
-- ./node_modules/.bin/webpack
-- npx webpack
image.png
2.4 其实使用 npx webpack 还是很陌生的 一般会在 package.json 中的"scripts"去配置
image.png
四.webpack 安装指定的版本
npm install webpack@4.1.1
五.如果你想在打包的时候 入口的打包文件和出口的打包文件叫自己指定的名字的话,以下配置:
打包入口文件默认叫index.js
image.png
六. 什么是css-loaders?
webpack 是不认识css 的 所以要在项目中要安装 CSS-loader CSS转换器
image.png
安装命令:
npm install css-loader -D
七.在webpack.config.js中 配置css-loader,常用的有三种方式:
1. 内联样式
2. CLI的方式(webpack5中不再使用)弃用
image.png
3. loader 配置方式:-推荐方式
// loader配置
module: {
rules: [
{
test: /\.css$/, // 正则表达式
// 1.loader的写法(语法糖)
// loader: "css-loader"
// 2.完整的写法
use: [
// {loader: "css-loader"}
"css-loader"
]
}
]
}
image.png
八.认识style-loader
1. 已经可以通过css-loader来加载css 文件了
-- 但是会发现这个css在代码中并没有生效(页面没有效果)
2. 这是为什么呢?
-- 因为css-loader只负责.css文件的解析,并不会将解析之后的css插入到页面中
-- 如果希望完成插入style的操作,那么我们还需要另外一个loader,就是style-loader
3. 安装style-loader命令:
npm install style-loader -D
4. style-loader的配置
use: [
// {loader: "css-loader"}
"style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
"css-loader"
]
image.png
九. 如何处理less文件?
浏览器是不认识less文件的 所以需要安装一个less complier
1.less 安装命令:
npm install less -D
2. less-loader安装命令:
npm install less-loader -D
image.png
十.webpack-设置背景图片 file-loader
十.一 file-loader的作用就是帮助我们处理import/require()方式引入一个文件资源,并且会将他放到我们输入的文件夹中
1. file-loader 安装命令:
npm install file-loader -D
十.二. url-loader和file-loader的工作方式是相似的,但是可以将较小 的文件,转成base64的URI,也就是直白的说: 可以帮我们处理图片打包体积的缩小优化
2. url-loader 安装命令:
npm install url-loader -D
/******************以上的配置代码******************/
const path = require('path')
module.exports = {
// 入口文件 打包时进入到src目录下指定要找的入口打包文件
entry: "./src/main.js",
output: { // 出口文件
path: path.resolve(__dirname, "./build"), // 必须是绝对路径,配置一个打包好的文件
filename: "build.js"
},
// loader配置
module: {
rules: [
{
test: /\.css$/, // 正则表达式
// 1.loader的写法(语法糖)
// loader: "css-loader"
// 2.完整的写法
use: [
// {loader: "css-loader"}
"style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
"css-loader"
]
},
{ // less文件的配置
test: /\.less$/,
use: [
"style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
"css-loader",
"less-loader"
]
},
// 图片资源 file-loader
// {
// test: /\.(jpe?g|png|gif|svg)$/,
// use: {
// loader: "file-loader",
// // 图片的命名规则
// options:{
// outputPath: "img", // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
// name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
// }
// }
// }
// 图片资源 url-loader
{
test: /\.(jpe?g|png|gif|svg)$/,
use: {
loader: "url-loader",
// 图片的命名规则
options: {
outputPath: "img", // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
limit: 100 * 1024
}
}
}
]
}
}
十二. 认识asset module type
我们当前使用webpack版本是webpack5
1. 在webpack5 之前,加载这些资源我们需要使用一些 loader,比如raw-loader,url-loader,file-loader;
2. 在webpack5 开始,就可以直接使用资源模块类型(asset module type) ,来代替上面的loader
3. 资源模块类型(asset module type) 通过添加4中模块类型,来替代所有的loader
-- asset/resource 发送一个单独的文件并导出URL,之前通过使用file-loader
-- asset/inline 导出一个资源的data URI,之前通过使用 url-loader实现
-- asset/source 导出资源的源代码,之前通过使用 raw-loader实现
-- asset在导出一个data URI 和 发送一个独立的文件之间自动选择,之前通过使用url-loader,并且配置资源体积限制实现
const path = require('path')
module.exports = {
// 入口文件 打包时进入到src目录下指定要找的入口打包文件
entry: "./src/main.js",
output: { // 出口文件
path: path.resolve(__dirname, "./build"), // 必须是绝对路径,配置一个打包好的文件
filename: "build.js"
},
// loader配置
module: {
rules: [
{
test: /\.css$/, // 正则表达式
// 1.loader的写法(语法糖)
// loader: "css-loader"
// 2.完整的写法
use: [
// {loader: "css-loader"}
"style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
"css-loader"
]
},
{ // less文件的配置
test: /\.less$/,
use: [
"style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
"css-loader",
"less-loader"
]
},
// 图片资源 file-loader
// {
// test: /\.(jpe?g|png|gif|svg)$/,
// use: {
// loader: "file-loader",
// // 图片的命名规则
// options:{
// outputPath: "img", // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
// name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
// }
// }
// }
// 图片资源 url-loader
// {
// test: /\.(jpe?g|png|gif|svg)$/,
// use: {
// loader: "url-loader",
// // 图片的命名规则
// options: {
// outputPath: "img", // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
// name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
// limit: 100 * 1024
// }
// }
// }
// webpack5 的配置 四种模块类型,以上注释的都可以不需要了
{
test: /\.(jpe?g|png|gif|svg)$/,
// type: "asset/resource"
generator: {
filename: "img/[name]_[hash:6][ext]"
},
type: "asset",
parser:{
dataUrlCondition:{
maxSize: 100*1024
}
}
}
]
}
}
十三.认识插件Plugin
Loader 是用于特定的模块类型进行转换
Plugin可以用于执行更加广泛的任务, 比如打包优化, 资源管理,环境变量注入等;
1. CleanWebpackPlugin 插件: 每次修改一些配置,重新打包时,都需要手动删除build文件夹, 很不方便,此时可以借助这个CleanWebpackPlugin 插件来完成
CleanWebpackPlugin 安装命令: npm install clean-webpack-plugin -D
2.0.在webpack.config.js 文件中导入Clean-webpack-plugin插件
// 2.1.导入Clean-webpack-plugin插件的导入
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 2.2.使用
plugins:[
new CleanWebpackPlugin()
]
十四.HtPluginWebpackml的认识
我们的HTML文件是编写在根目录下的,而最终打包的build文件夹中是没有index.html文件的
在进行项目部署,必然也是需要有对应的入口文件index.html,所以也需要对index.html进行打包处理,对HTML进行打包处理我们可以使用另外一个插件: HtmlWebpackPlugin;
HTMLWebpackPlugin安装命令: npm install html-webpack-plugin -D
