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

文章目录

1. 概述

webpack作用：前端项目构建工具 - 打包工具 - 可解决下面的开发问题

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

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

2. webpack基本使用

基本使用1

使用步骤

基本使用2

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

扫描二维码关注公众号，回复： 13264314 查看本文章

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 文件打包出入口

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

&esmp;

3.2 配置自动打包功能

背景：因为我们使用webpack打包后的main.js进行运行有ES6语法的代码，所以每次打包npm run dev实在是太麻烦

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

当我们修改 index.js代码时则会自动的进行刷新页面效果，非常的方便

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才可以打包其他文件类型

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)]