【 web高级 02webpack 】webpack01

其他 2021-04-06 15:42:44 阅读次数: 0

目标：

清楚理解和掌握webpack的配置、概念

1.webpack简介

在这里插入图片描述

webpack is a module bundler(模块打包工具)

webpack是一个打包模块化Javascript的工具，它会从入口模块触发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有依赖打包到一个单独的文件中

是工程化、自动化思想在前端开发中的体现

2.安装webpack

2.1-环境准备

nodejs

2.2-全局安装 不推荐

# 安装webpack V4+版本时，需要额外安装webpack-cli 
npm install webpack webpack-cli -g 
# 检查版本 
webpack -v
# 卸载 
npm uninstall webpack webpack-cli -g

全局安装webpack，这会将你项目中的webpack锁定到指定版本，造成不同的项目中因为webpack依赖不同的版本而导致冲突，构建失败

2.3-项目安装 推荐

npm init -y

# -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json

# 安装最新的稳定版本 
npm i -D webpack
# 安装指定版本 
npm i -D webpack@<version>
# 安装最新的体验版本 可能包含bug,不不要⽤用于⽣生产环境 
npm i -D webpack@beta
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

# 同时安装 webpack  webpack-cli
npm install webpack  webpack-cli -D

npm install -S -D -g 有什么区别

npm install module_name -S    即    npm install module_name --save   
# 写入dependencies

npm install module_name -D    即    npm install module_name --save-dev
# 写入devDependencies

npm install module_name -g 
# 全局安装(命令行使用)

npm install module_name 
#本地安装(将安装包放在 ./node_modules 下)


-----


dependencies与devDependencies有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境

dependencies 是需要发布到生产环境的

2.4-检查安装

webpack -v 
# command not found 默认在全局环境中查找

npx webpack -v
# npx帮助我们在项⽬目中的node_modules⾥里里查找 webpack 

./node_modules/.bin/webpack -v
# 到当前的node_modules模 块⾥里里指定webpack

3.启动webpack执行构建

1chunk = 1bundle
chunk是代码块
bundle是资源文件
1chunk可以是多个模块组成的
模块？nodejs里 万物皆模块

3.1-webpack默认配置

  • webpack默认支持JS模块和JSON模块
  • 支持CommonJS、ES moudle、AMD等模块类型
  • webpack4支持零配置使用，但是很弱，稍微复杂写的场景都需要额外扩展

3.2-准备执行构建

  • 新建src文件夹
  • 新建index.js
console.log("hello webpack!");

//wenpack的默认配置

// 1.webpack执行构建会找 webpack.config.js 这个配置文件，如果没有找到，走默认配置

3.3-执行构建

# npx⽅方式 
npx webpack


# npm script 
npm run test

修改package.json文件：

"scripts": {
    
      
	"test": "webpack" 
},

原理就是通过shell脚本在node_modules/.bin目录下创建一个软链接

执行 npx webpack

3.4-构建成功

我们会发现目录下多出一个dist目录，里面有一个main.js，这个文件是一个可执行的Javascript文件，里面包含webpackBootstrap
启动函数。

在这里插入图片描述

3.在dist新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

在这里插入图片描述
wenpack的默认配置

webpack执行构建会找 webpack.config.js 这个配置文件，如果没有找到，走默认配置

3.5-默认配置

webpack.config.js

//webpack 是基于nodejs的

const path = require("path");

//默认配置
module.exports = {
    
    
    //入口 执行构建的入口 项目入口
    entry:"./src/index.js",
    //出口 
    output:{
    
    
        //构建的文件资源放在哪？ 必须是绝对路径
        path:path.resolve(__dirname,"./dist"),
        //构建的文件资源叫啥
        filename:"main.js"
    }
}

在这里插入图片描述

4.webpack配置核心概念

零配置是很弱的，特定的需求，总是需要自己进行配置

webpack有默认的配置文件，叫 webpack.config.js，我们可以对这个文件进行修改，进行个性化配置

  • 使用默认的配置文件：webpack.config.js
  • 不使用自定义配置文件：比如 webpackconfig.js可以通过 --config wenpackconfig.js
    来指定webpack使用哪个配置文件来构建

webpack.config.js配置基础结构

module.exports = {
    
      
	entry: "./src/index.js", //打包⼊入⼝口⽂文件  
	output: "./dist", //输出结构  
	mode: "production", //打包环境  
	module: {
    
     
		rules: [      
			//loader模块处理理      
			{
    
          
				test: /\.css$/,      
				use: "style-loader"     
			}  
		] 
	}, 
	plugins: [new HtmlWebpackPlugin()] //插件配置
};

4.1-entry

指定webpack打包入口文件；webpack执行构建的第一步从Entry开始，可抽象成输入

//单⼊入⼝口 SPA，本质是个字符串串 
entry:{
    
      
	main: './src/index.js' 
} 
==相当于简写=== 
entry:"./src/index.js"


//多⼊入⼝口 entry是个对象 
entry:{
    
      
	index:"./src/index.js",  
	login:"./src/login.js" 
}

entry：入口 执行构建的入口 项目入口 字符串 数组 对象

4.1.1-字符串

module.exports = {
    
    
    entry:"./src/index.js",
    //出口 
    output:{
    
    
        path:path.resolve(__dirname,"./dist"),
        filename:"main.js"
    }
}

4.1.2-数组

module.exports = {
    
    
    entry:["./src/index.js","./src/other.js"],
    //出口 
    output:{
    
    
        path:path.resolve(__dirname,"./dist"),
        filename:"main.js"
    }
}

在这里插入图片描述

4.1.3-对象

多页面多入口多出口语法

多页面多入口语法
module.exports = {
    
    
    entry:{
    
    
        index:"./src/index.js",
        other:"./src/other.js",
    },
    output:{
    
    
    	path:path.resolve(__dirname,"./dist"),
        filename:"[name].js" // [name] 占位符
    }
}

在这里插入图片描述
新建index.html,other.html —> 多页面的应用

# 详细
module.exports = {
    
    
    //入口 执行构建的入口 项目入口  字符串  数组  对象
    //必填  webpack执⾏行行构建⼊入⼝口
    //----
    //单页面
    //entry:"./src/index.js",
    //entry:["./src/index.js","./src/other.js"],
    //----
    //多页面多入口语法
    //index  是指定第一个入口代码块的名称（打包输出的文件默认以这个命名）
    //other 是指定第二个入口代码块的名称（打包输出的文件默认以这个命名）
    entry:{
    
    
        index:"./src/index.js",
        other:"./src/other.js",
    },
    //出口 
    output:{
    
    
        //构建的文件资源放在哪？ 必须是绝对路径
        //输出⽂文件的存放路路径，必须是绝对路路径 
        path:path.resolve(__dirname,"./dist"),
        //构建的文件资源叫啥？ 无论是多出口还是单出口 都推荐使用占位符号
        //将所有依赖的模块合并输出到 main.js 
        //filename:"main.js"
        filename:"[name].js" // [name] 占位符

    }
}

4.2-output

打包转换后的文件输出到磁盘位置：输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果。

output: {
    
        
filename: "bundle.js",//输出⽂文件的名称   
path: path.resolve(__dirname, "dist")//输出⽂文件到 磁盘的⽬目录，必须是绝对路路径 
}, 



//多⼊入⼝口的处理理 
output: {
    
        
	filename: "[name][chunkhash:8].js",//利利⽤用占位符， ⽂文件名称不不要重复    
	path: path.resolve(__dirname, "dist")//输出⽂文件到 磁盘的⽬目录，必须是绝对路路径 
},

4.2.1-占位符

目前支持的占位符

  • hash
  • chunkhash
  • name
  • id

hash

hash指的是npx webpack打包之后的Hash
整个项目的hash值，每构建一次，就会有一个新的hash。 可以拼接使用，可以指定长度,最长20位，一般6位，
在这里插入图片描述
在这里插入图片描述
完整代码

//webpack 是基于nodejs的
//webpack配置 就是一个对象

const path = require("path");



module.exports = {
    
    
    entry:"./src/index.js",

    output:{
    
    
      
        path:path.resolve(__dirname,"./dist"),
        
        filename:"[name]-[hash:6].js" // [name] 占位符

        /**
         * 占位符
         * 
         * hash   
         * 整个项目的hash值，每构建一次，就会有一个新的hash。 可以拼接使用，可以指定长度,最长20位，一般6位，
         * 
         * chunkhash   
         * name
         * id
         */
        

    }
}

chunkhash 多入口

根据不同入口entry进行依赖解析，构建对应的chunk，生成相应的hash
只要组成entry的模块没有内容改动，则对应的hash不变

在这里插入图片描述
完整代码

//webpack 是基于nodejs的
//webpack配置 就是一个对象

const path = require("path");



module.exports = {
    
    
    //context ：上下文  项目打包的相对路径 ，必须是绝对路径，一般不修改
    // context: process.cwd(),//默认值： process.cwd()  -->  01这个根目录
    mode: 'development',
    //入口 执行构建的入口 项目入口  字符串  数组  对象
    // 必填  webpack执⾏行行构建⼊入⼝口
    //----
    //单页面
    // entry:"./src/index.js",
    // entry:["./src/index.js","./src/other.js"],
    //----
    //多页面多入口语法
    // home  是指定第一个入口代码块的名称（打包输出的文件默认以这个命名）
    // about 是指定第二个入口代码块的名称（打包输出的文件默认以这个命名）
    entry:{
    
    
        index:"./src/index.js",
        other:"./src/other.js",
    },
    //出口 
    output:{
    
    
        //构建的文件资源放在哪？ 必须是绝对路径
        //  输出⽂文件的存放路路径，必须是绝对路路径 
        path:path.resolve(__dirname,"./dist"),
        //构建的文件资源叫啥？ 无论是多出口还是单出口 都推荐使用占位符号
        //  将所有依赖的模块合并输出到 main.js
        // filename:"main.js"
        filename:"[name]-[chunkhash:6].js" // [name] 占位符

        /**
         * 占位符
         * 
         * hash   
         * 整个项目的hash值，每构建一次，就会有一个新的hash。 可以拼接使用，可以指定长度,最长20位，一般6位，
         * 
         * chunkhash   多入口
         * 根据不同入口entry进行依赖解析，构建对应的chunk，生成相应的hash    
         * 只要组成entry的模块没有内容改动，则对应的hash不变
         * 
         * name
         * id
         */
        

    }
}

4.3-mode

Mode用来指定当前的构建环境

  • production
  • development
  • none

设置mode可以自动触发webpack内置的函数，达到优化的效果

在这里插入图片描述

开发阶段的开启回有利于热更新的处理，识别哪个模块变化
生成阶段的开启会有帮助模块压缩，处理副作用等一些功能

报错：
在这里插入图片描述

The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

尚未设置“mode”选项，对于此值，webpack将回退到“production”。
将“mode”选项设置为“development”或“production”，为每个环境启用默认值。
也可以将其设置为“无”以禁用任何默认行为。

module.exports = {
    
    
  mode: 'development', 
};

development的结果
在这里插入图片描述

production的结果
默认开启一些优化插件
在这里插入图片描述

4.4-loader

webpack 默认只支持.json 和 .js模块 不支持其他格式的模块

模块解析，模块转换器，用于把模块原内容按照需求转换成新内容。

webpack是模块打包工具，而模块不仅仅是js，还可以是css，图片或者其他格式
在这里插入图片描述

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file.

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。

webpack默认只支持.json和.js模块，不支持，不认识其他格式的模块

但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，就需要loader了。

常见的loader

style-loader
css-loader
less-loader
sass-loader
ts-loader //将ts转换为js
babel-loader //转换es6、7等js新特性语法
file-loader //处理图片子图
eslint-loader
...

4.5-module

模块，在webpack里一切皆模块，一个模块对应着一个文件。webpack会从匹配值的entry开始递归找出所有依赖的模块。

当webpack处理不认识的模块时，需要在webpack中的module出进行处理，当检测到是什么格式的模块，使用什么loader来处理。

module:{
    
      
	rules:[ 
		{
    
        
			test:/\.xxx$/,//指定匹配规则  
			use:{
    
       
				loader: 'xxx-load'//指定使⽤用的loader 
			} 
		}
	]
}

4.5.1-CSS样式处理：

css-loader 分析css模块之间的关系，合并成一个css
在这里插入图片描述

style-loader 会把css-loader生成的内容，以style挂载到页面heade部分

4.5.1.1-安装loader
npm install style-loader css-loader -D

在这里插入图片描述

4.5.1.2-完整代码
module.exports = {
    
    

    //loader  模块转换
    //如何处理不认识的模块
    module:{
    
    
        //loader 模块转换
        rules:[
            {
    
    
                test: /\.css$/,
                //loader的执行顺序是从后往前
                
                //css-loader  言简意赅 是把 css模块的内容 加入到 js模块 中去
                //css in  js 方式

                //style-loader  从js中提取css的loader，在html中创建style标签，把css内容放在这个style标签中
                use: ['style-loader', 'css-loader'],

            }
        ]
    }
    
}
4.5.1.3-构建结果

在这里插入图片描述

4.5.1.4-在浏览器中查看结果
dist文件夹下，新建index.html，引入main.js

在这里插入图片描述

4.5-plugins

  • 作用于webpack打包整个过程
  • webpack的打包过程是由（声明周期概念）钩子

plugins可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于声明周期的概念

扩展插件，在webpack构建流程中的特定实际注入扩展逻辑来改变构建结果或做你想做的事情。

作用于整个构建过程

4.5.1-clean-webpack-plugin

npm install --save-dev clean-webpack-plugin

const {
    
     CleanWebpackPlugin } = require("cleanwebpack-plugin");
...
plugins: [    new CleanWebpackPlugin() ]

在这里插入图片描述
在这里插入图片描述



const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    
    
    //插件：这个机制原理是作用于webpack整个打包周期的
    /**
     * clean-webpack-plugin 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
     * 
     */
    plugins:[
        new CleanWebpackPlugin(),
    ]
}

webpack5.0  

module.exports = {
    
    
    output: {
    
    
        clean: true,  和插件clean-webpack-plugin 一样的效果
    },
}

4.6-context

context ：上下文 项目打包的相对路径 ，必须是绝对路径，一般不修改

module.exports = {
    
    
    //context ：上下文  项目打包的相对路径 ，必须是绝对路径，一般不修改
    context: process.cwd(),//默认值： process.cwd()  -->  01这个根目录
}

视频讲的是webpack 4.+的版本

5.完整代码

package.json

{
    
    
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.3",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    
    }
}

webpack.config.js

//webpack 是基于nodejs的
//webpack配置 就是一个对象

const path = require("path");
const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    
    
    //context ：上下文  项目打包的相对路径 ，必须是绝对路径，一般不修改
    // context: process.cwd(),//默认值： process.cwd()  -->  01这个根目录
    
    //入口 执行构建的入口 项目入口  字符串  数组  对象
    // 必填  webpack执⾏行行构建⼊入⼝口
    //----
    //单页面
    entry:"./src/index.js",
    // entry:["./src/index.js","./src/other.js"],
    //----
    //多页面多入口语法
    // home  是指定第一个入口代码块的名称（打包输出的文件默认以这个命名）
    // about 是指定第二个入口代码块的名称（打包输出的文件默认以这个命名）
    // entry:{
    
    
    //     index:"./src/index.js",
    //     other:"./src/other.js",
    // },
    //出口 
    output:{
    
    
        //构建的文件资源放在哪？ 必须是绝对路径
        //  输出⽂文件的存放路路径，必须是绝对路路径 
        path:path.resolve(__dirname,"./dist"),
        //构建的文件资源叫啥？ 无论是多出口还是单出口 都推荐使用占位符号
        //  将所有依赖的模块合并输出到 main.js
        // filename:"main.js"
        filename:"[name]-[hash:6].js" // [name] 占位符

        /**
         * 占位符
         * 
         * hash   
         * 整个项目的hash值，每构建一次，就会有一个新的hash。 可以拼接使用，可以指定长度,最长20位，一般6位，
         * 
         * chunkhash   多入口
         * 根据不同入口entry进行依赖解析，构建对应的chunk，生成相应的hash    
         * 只要组成entry的模块没有内容改动，则对应的hash不变
         * 
         * name
         * id
         */
        

    },
    // mode: 'development',
    mode:'production',

    //loader  模块转换
    //如何处理不认识的模块
    module:{
    
    
        //loader 模块转换
        rules:[
            {
    
    
                test: /\.css$/,
                //loader的执行顺序是从后往前

                //css-loader  言简意赅 是把 css模块的内容 加入到 js模块 中去
                //css in  js 方式

                //style-loader  从js中提取css的loader，在html中创建style标签，把css内容放在这个style标签中
                use: ['style-loader', 'css-loader'],

            },
        ]
    },

    //插件：这个机制原理是作用于webpack整个打包周期的
    /**
     * clean-webpack-plugin 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
     */
    plugins:[
        new CleanWebpackPlugin(), 
    ]
}

index.js

// console.log("hello webpack!");



//wenpack的默认配置

// 1.webpack执行构建会找 webpack.config.js 这个配置文件，如果没有找到，走默认配置





//-------------------------------------------------------------------------------------------------------------------






//模块化开发  当前流行的单页面入口应用  spa
//引入模块 形成依赖 
// require 、 import

/**
webpack支持  ES6，CommonJS 和 AMD

https://webpack.docschina.org/api/module-methods/

---------------


ES6   使用 import 和 export

import

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

******


export 
默认导出整个模块或具名导出模块。

// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
};



---------------


CommonJS

var $ = require('jquery');
var myModule = require('my-module');
也可以为 require 启用魔法注释，请参阅 module.parser.javascript.commonjsMagicComments 了解更多。




---------------


AMD 


 */



// import { add } from './other'; // es6

// const res = add(5,6);

// console.log("res",res);







// import css from  "./index.css"
// import "./index.css";
//报错


// import "./index.less"

console.log("xixi");

other.js

// console.log("other.js");


export function add(n1,n2){
    
    
    return n1 +  n2;
}

index.css

body{
    
    
    background: red;
}

猜你喜欢

转载自blog.csdn.net/weixin_42580704/article/details/114285221
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022