文章目录
1. 概述
webpack作用：前端项目构建工具 - 打包工具 - 可解决下面的开发问题
不用webpack的情况下是下图的左侧(各种文件)，右侧是使用webpack打包后的情况
2. webpack基本使用
基本使用1
使用步骤
基本使用2
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 文件打包出入口
&esmp;
3.2 配置自动打包功能
背景：因为我们使用webpack打包后的main.js进行运行有ES6语法的代码，所以每次打包npm run dev实在是太麻烦
当我们修改 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才可以打包其他文件类型
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 -D
babel.config.js
module.exports = {
presets: ["@babel/preset-env"],
plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}
4.5 vue单文件组件加载器
配置步骤
