Webpack学习1 - 概述、静态项目的启动配置、各种加载器配置

最新推荐文章于 2024-09-27 16:16:30 发布
最新推荐文章于 2024-09-27 16:16:30 发布
阅读量258 收藏 1
点赞数 1
分类专栏： Vue 文章标签： V webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39651356/article/details/105771249
版权

文章目录

1. 概述

webpack作用：前端项目构建工具 - 打包工具 - 可解决下面的开发问题
Web开发面对的问题
文件依赖关系复杂
静态资源请求效率低
模块化支持不好
浏览器对高级JS语法兼容程度低

 

不用webpack的情况下是下图的左侧(各种文件)，右侧是使用webpack打包后的情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PAqd7oKE-1587889156311)(en-resource://database/22782:1)]

2. webpack基本使用

基本使用1

使用步骤
创建一个空项目目录下 - IDEA选static web模块即可
初始化目录：npm init -y - 生成package.json包管理文件
在项目里面创建src源码目录
在src目录下创建 index.html 首页页面
下载前端的框架：npm install 框架名字 --s
基本使用2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cnLdOUP-1587889156332)(en-resource://database/22784:1)]
安装webpack：npm install webpack webpack-cli -D
项目下创建webpack配置文件：webpack.config.js
配置文件中添加：mode.export={ mode:'development' }
或者 mode:'production' - main.js更加的小
包管理文件package.json添加：''scripts':{ 'dev':'webpack' }
项目进行webpack打包：npm run dev
执行上述打包命令后会多出一个目录dist，里面有main.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwG0AYGO-1587889156336)(en-resource://database/22788:1)]

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="./index.js" ></script>
</head>
<body>
    <h1>我是首页</h1>
</body>
</html>

 

index.js

import  $ from "jquery"

$(function() {
    $("body").css("backgroundColor","red");
})

 
 
问题造成：浏览器不支持ES6的模块导入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1OKJ5H7-1587889156344)(en-resource://database/22792:1)]

 
 

解决兼容性问题方案：使用webpack进行打包：npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z6ZzoU6E-1587889156348)(en-resource://database/22794:1)]

 将index.html的index.js脚本替换成打包后的main.js脚本即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="./index.js" ></script>
    <script src="../dist/main.js" ></script>
</head>
<body>
    <h1>我是首页</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BdYGm7sO-1587889156353)(en-resource://database/22796:1)]

3. webpack配置知识

3.1 文件打包出入口
webpack默认出入口
入口文件：项目目录下/src/index.js
出口文件：项目目录/dis/main.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vO7ibaeC-1587889156356)(en-resource://database/22798:1)]

&esmp;

3.2 配置自动打包功能

背景：因为我们使用webpack打包后的main.js进行运行有ES6语法的代码，所以每次打包npm run dev实在是太麻烦
项目目录下：npm install webpack-dev-server -D
package.json文件：'scripts'dev':{' 'webpack-dev-server'}
index.html中的脚本引用路径为：/main.js --- 注意run命令后该文件是放在内存里面的，我们看不到
重新打包：npm run dev
访问localhost:8080 - 即是打包后的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSZvtFSh-1587889156361)(en-resource://database/22802:1)]

 
 

当我们修改 index.js代码时则会自动的进行刷新页面效果，非常的方便
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWr9PlWN-1587889156365)(en-resource://database/22804:1)]

 

3.3 配置html-webpack-plugin - 生成预览页面

背景：当我们访问localhost:8080时是文件目录，在点击src才能看到页面效果，比较麻烦，需求是访问localhost:8080直接就是页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dUCDy1V4-1587889156371)(en-resource://database/22806:1)]

 
 

npm run dev 项目跑起来后：localhost:8080直接就是index.html页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tlny6o5Y-1587889156463)(en-resource://database/22808:1)]

 

3.4 配置项目跑起来自动打开浏览器

npm run dev之后自动打开浏览器
package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --open --host 127.0.0.1 --port 8080"
  }

4. webpack的加载器

4.1 加载器小知识

注意：webpack默认只能打包js文件，其他文件类型webpack是处理不了的
 
解决方案：需要给webpack配置、调用其他文件类型加载器 - webpack才可以打包其他文件类型
加载器loader
less-loader：打包处理.less的文件类型
sass-loader：打包处理.sass的文件类型
url-loader：打包处理css中与url路径相关的文件
其他加载器

 
 

webpack打包过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QL6vqFM6-1587889156469)(en-resource://database/22812:1)]

 

4.2 样式加载器
4.2.1 CSS文件加载器

文件结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5DSS07xJ-1587889156478)(en-resource://database/22816:1)]

 

当在index.js中导入一个css文件时，终端直接就报错了，如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBLAlhZs-1587889156487)(en-resource://database/22814:1)]

 
 

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly6AQrJf-1587889156494)(en-resource://database/22818:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gEKTzE0X-1587889156549)(en-resource://database/22820:1)]

 

4.2.2 less文件加载器

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EidL8Yut-1587889156646)(en-resource://database/22824:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NWO5haRm-1587889156678)(en-resource://database/22822:1)]

 

4.2.3 scss文件加载器

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZFz6ZDu-1587889156683)(en-resource://database/22826:1)]

 
 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXw2d8uZ-1587889156700)(en-resource://database/22828:1)]

 

4.2.4 postCSS-样式在各浏览器兼容性问题自动配置

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XoJg6pI1-1587889156709)(en-resource://database/22830:1)]

 

postcsss.config.js

const autoprefixer = require("autoprefixer")

module.exports = {
    plugins: [autoprefixer]
}

 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KK7ChrMo-1587889156717)(en-resource://database/22832:1)]

 

4.3 图片、字体加载器

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wrgGKXFK-1587889156725)(en-resource://database/22834:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oiZ6YAAi-1587889156730)(en-resource://database/22836:1)]

 

4.4 JS高级语法加载器

注意：webpack只能打包的普通的js语法，高级JS语法不行

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1QIwbrnu-1587889156734)(en-resource://database/22838:1)]

 

npm install babel-loader @babel/core @babel/runtime -D


npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

 

babel.config.js

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

 

4.5 vue单文件组件加载器

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMACVHZ5-1587889156746)(en-resource://database/22950:1)]

嗯嗯**
关注
专栏目录
webpack静态模块打包器
qq_43944285的博客
05-02 817
webpack 概述 : 是一个现代的JavaScript应用程序的静态模块的打包器(module bundle) 静态:文件资源 模块:node环境,引入文件,遵守模块化语法. less/sass ->css 多个文件 -->webpack(打包 翻译(es6/7/8的翻译成es5(兼容浏览器)) 压缩(把文件压缩合并(删除空格和注释))) --> .js .css .jpg .png 操作: 1.环境基于node 2.项目准备
Vue全家桶之前端工程化（模块化、Webpack、Vue-cli脚手架、Element-UI）
huohuoit的博客
05-08 751
1. 模块化相关规范 1.1 模块化概述 1.1.1传统开发模式的主要问题 ① 命名冲突 ② 文件依赖 通过模块化解决上述问题：  模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块  模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 1.2 浏览器端模块...
webpack-config：用于静态项目的Webpack 4配置。
02-06
Webpack 4配置 这是我的个人webpack v4配置，用于小型静态项目。 随时为您的项目贡献，改进或使用它。 开箱即用，包含一些整洁的东西！ jQuery的 用Popper.js进行引导 FontAwesome Pro （除非具有Pro帐户，否则无法安装，因为您将需要安装令牌） 此配置处理什么？ 开发生产环境共通 它接受两个入口点； 一个用于app ，一个用于vendor 它使用相对路径而不是绝对路径编译所有内容 它将sass/scss编译为css文件 它将es6编译为每个浏览器都可以理解的语法 它包含最新的Boostrap ，但具有完全模块化的设置； 您可能只包含所需的部分，因
Webpack生成企业站静态页面 - 项目搭建
觉醒法师的专栏
03-26 1596
现在Web前端流行的三大框架有Angular、React、Vue，很多项目经过这几年的洗礼，已经都 转型使用这三大框架进行开发，那为什么还要写纯静态页面呢？比如Vue中除了SPA单页面开发，也可以使用nuxt.js实现SSR服务端渲染，满足SEO优化。但是对于那些还是在维护老项目，使用MVC、MVP进行开发，或者觉得使用nuxtjs成本较高小型项目，从历史原因和项目实际情况考虑，会退而求其次，让前端快速完成页面框架和样式，交付后端进行数据渲染。
【Webpack】assets 和 static（public）的区别
最新发布
小秀的博客
09-27 233
因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传。
webpack配置项目并启用静态服务运行项目
Kotoba209_的博客
04-11 639
demo仓库地址 1. 新建一个js文件 2. npm init -y 初始化建立package.json文件 3. 安装webpack和webpack-cli yarn add webpack -D yarn add webpack-cli -D 4. 新建webpack.config.js文件， 并开始填写以下内容 引入node模块path const path = require('pa...
webpack-dev-server：静态资源目录配置
席木木的博客
01-17 6746
webpack-dev-server：静态资源目录配置
静态工程 启动server
etemal_bright的博客
03-29 246
http-server -p 8888 （这是端口号）
webpack-starter
03-09
- **Loader（加载器）**：用于转换模块，将非 JavaScript 文件转换为可被 JavaScript 引用的形式，例如 Babel Loader 转换 ES6+ 语法。 - **Plugins（插件）**：扩展 Webpack 功能的工具，执行更复杂的任务，例如...
redux-template:redux 启动项目
05-14
1. **初始化项目**：项目使用 Yarn 包管理器进行初始化，通过运行 `$ yarn install` 命令来安装所有依赖，包括 Redux、react-redux 和 redux-devtools-extension。 2. **启动项目**：启动项目使用 `$ yarn start` ...
前端工程化 webpack
qq_43420617的博客
03-26 1524
webpack webpack 是前端项目工程化的具体解决方案 主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能 npm init -y npm install jquery -S 安装webpack npm install webpack webpack-cli -D -S --save -D --save-dev 通过npmjs.com查看安装时选择-S还是-D index.js 配置基础语句 以隔行变色为例 // es6导入语法 impo
vue25多页应用多级目录结构可灵活配置的staticcommonjswebpack3
08-12
vue2.5，多页应用，多级目录结构，可灵活配置的static/common.js，webpack3
webpack（静态模块打包工具）
weixin_68211919的博客
10-09 405
webpack环境安装、webpack的构成：entry（入口）、output（输出）、loader（加载器）、plugins（插件）、mode（模式）、开发环境（devServer）
随手记录9:项目启动加载类到静态实现静态方法调用.
weixin_43812522的博客
05-27 513
随手记录9:静态类中使用spring托管类,自定义加载类简介项目结构加载方式1.通过静态代码块扫描需要加载的类的包路径2. 通过applicationContext 对象获取3.通过实现InitializingBean 接口controller 中静态调用完整版的 CapitalFileHandleContext 简介 项目中有很多通用的处理类需要加载到内存中;而且实现静态方法注入使用这些对象内容;这些对象一般有统一的父类(接口/抽象类);需要在项目启动就将我们指定的对象加载到内存中 demo下载 项目结构
webpack实现静态资源缓存
miaomiao_1024的博客
02-22 2142
webpack如何实现静态资源缓存，相关配置几原理
webpack开发服务器配置
weixin_57677300的博客
05-15 786
比如在index.html中，我们需要依赖一个 abc.js 文件，这个文件我们存放在 public文件 中；在index.html中，我们应该如何去引入这个文件呢？✓ 比如代码是这样的：< script src="./public/abc.js">；但是这样打包后浏览器是无法通过相对路径去找到这个文件夹的；会报错解决：所以代码是这样的：< script src="./abc.js">< /script>;设置static即可；
webpack配置项目加载静态资源
冰水zzy的博客
02-04 1万+
在上篇文章中，我分享了vue-loader与webpack项目配置，链接 http://blog.csdn.net/zzy123654321/article/details/79250644 这篇文章中，我将分享如何加载页面所需的各类静态资源 1.配置loader 打开webpack.config.js文件，在module下添加rules //css相关配置 {
关于Webpack里边static和assets目录区别
weixin_42283462的博客
06-08 3413
一针见血把。static放经常更改的图，比如商品图之类的。assets放很少修改的比如logo、小图标等。static一般使用绝对路径，/static/...assets一般使用相对路径...
webpack的static和assets目录区别
热门推荐
weixin_40012136的博客
09-15 1万+
图一：引用了三个图片，前两个是绝对路径，后一个是相对路径。 图二：ctrl+h查找绝对路径在所出的包里面的位置。可以发现，页面中使用绝对路径时，图片文件不会被打包进js，图片文件需要被原原本本以图片格式存在static目录下，如果修改static中图片文件名，会导致页面找不到图片。 图三：ctrl+h查找相对路径在所出的包里面的位置。可以发现，使
React脚手架中Webpack配置的深入解析
1. Webpack核心概念：Entry（入口）、Output（输出）、Loaders（加载器）、Plugins（插件）和Mode（模式）。 2. Entry：是Webpack的配置入口，指示Webpack从哪个文件开始打包。 3. Output：定义Webpack打包后的输出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值