Webpack学习1 - 概述、静态项目的启动配置、各种加载器配置
1. 概述
webpack作用：前端项目构建工具 - 打包工具 - 可解决下面的开发问题
Web开发面对的问题文件依赖关系复杂静态资源请求效率低模块化支持不好浏览器对高级JS语法兼容程度低
不用webpack的情况下是下图的左侧(各种文件)，右侧是使用webpack打包后的情况
2. webpack基本使用
基本使用1
使用步骤
创建一个空项目目录下 - IDEA选static web模块即可初始化目录：npm init -y - 生成package.json包管理文件在项目里面创建src源码目录在src目录下创建 index.html 首页页面下载前端的框架：npm install 框架名字 --s
基本使用2
安装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
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的模块导入
解决兼容性问题方案：使用webpack进行打包：npm run dev
将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>
3. webpack配置知识
3.1 文件打包出入口
webpack默认出入口入口文件：项目目录下/src/index.js出口文件：项目目录/dis/main.js
&esmp;
3.2 配置自动打包功能
背景：因为我们使用webpack打包后的main.js进行运行有ES6语法的代码，所以每次打包npm run dev实在是太麻烦
项目目录下：npm install webpack-dev-server -Dpackage.json文件：'scripts'dev':{' 'webpack-dev-server'}index.html中的脚本引用路径为：/main.js --- 注意run命令后该文件是放在内存里面的，我们看不到重新打包：npm run dev访问localhost:8080 - 即是打包后的文件
当我们修改 index.js代码时则会自动的进行刷新页面效果，非常的方便
3.3 配置html-webpack-plugin - 生成预览页面
背景：当我们访问localhost:8080时是文件目录，在点击src才能看到页面效果，比较麻烦，需求是访问localhost:8080直接就是页面效果
npm run dev 项目跑起来后：localhost:8080直接就是index.html页面
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才可以打包其他文件类型
加载器loaderless-loader：打包处理.less的文件类型sass-loader：打包处理.sass的文件类型url-loader：打包处理css中与url路径相关的文件其他加载器
webpack打包过程
4.2 样式加载器
4.2.1 CSS文件加载器
文件结构
当在index.js中导入一个css文件时，终端直接就报错了，如下图
配置步骤
4.2.2 less文件加载器
配置步骤
4.2.3 scss文件加载器
配置步骤
4.2.4 postCSS-样式在各浏览器兼容性问题自动配置
配置步骤
postcsss.config.js
const autoprefixer = require("autoprefixer")
module.exports = {
plugins: [autoprefixer]
}
4.3 图片、字体加载器
配置步骤
4.4 JS高级语法加载器
注意：webpack只能打包的普通的js语法，高级JS语法不行
配置步骤
npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -Dbabel.config.js
module.exports = {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}4.5 vue单文件组件加载器
配置步骤
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_39651356/article/details/105771249
内容来源于网络，如有侵权，请联系作者删除！