webpack-小滴课堂学习笔记

webpack简介

1.webpack是什么

简介：webpack其实就是一个JavaScript应用程序的静态模块打包器。

2.webpack有什么作用

模块化打包：webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle。

 

Webpack环境配置和简单打包

1.安装node

node官网地址: https://nodejs.org/zh-cn/

2.创建package.json文件

命令：npm init

3.安装webpack

本地安装：（推荐）

npm install --save-dev webpack webpack-cli

yarn add --dev webpack webpack-cli

全局安装：

npm install --global webpack webpack-cli

4.打包

默认entry入口 src/main.js

默认output出口 dist/main.js

打包模式：

webpack --mode development

webpack --mode production

Package.json文件下添加scripts：

设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。

 

配置webpack.config.js

1.新建一个webpack.config.js

2.配置入口entry(所需打包的文件路径)

3.配置出口output

（1）path指文件打包后的存放路径

（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径

（3）__dirname 表示当前文件所在的目录的绝对路径

（4）filename是打包后文件的名称

4.命令行程序运行npm run dev或者npm run build

 

入口entry和出口output进阶用法

1.入口entry

（1）单入口

例如： entry：‘./src/index.js’

（2）多入口

2.出口

（1）单出口

（2）多出口

[name] 原文件的名字

配置webopack-dev-server

1.了解webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack主要提供两个功能：

（1）为静态文件提供服务。把webpack打包生成的资源文件，部署到本地服务器。

（2）自动刷新和热替换（HMR）。

2.安装webpack-dev-server

yarn add --dev webpack-dev-server

3.配置webpack.config.js文件

4.配置package.json

"scripts": {
​
    "start": "webpack-dev-server --mode development"
​
 }

5.在build文件夹下新建index.html文件，在html中引入bundle.js

6.在命令行程序运行npm run start

自动弹出页面，控制台有输出信息

 

加载css所需loader及其使用方法

1.了解loader

loader让wepack能够去处理那些非javascript文件（webpack 自身只理解 JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。

2.安装loader

安装style-loader和css-loader

yarn add --dev style-loader css-loader

3.配置loader

在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

2. use 属性，表示进行转换时，应该使用哪个 loader。

代码：

4.创建css文件并运行命令

创建index.css文件并import进index.js文件中

5.编译less

（1）处理效果

（2）安装loader

yarn add less-loader less --dev

（3）配置loader

6.编译sass

（1）处理效果

（2）安装loader

yarn add sass-loader node-sass --dev

（3）配置loader

7.使用postcss处理浏览器前缀

（1）处理效果

（2）安装loader

安装postcss-loader和autoprefixer

yarn add --dev postcss-loader autoprefixer

（3）配置loader

需要和autoprefixer一起用

或者在package.json里加上下图设置：

 

文件处理

1.图片处理

（1）安装loader

下载安装file-loader: yarn add --dev file-loader

(2)配置config文件

（3）选项配置

配置options：

name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）

context：配置自定义文件的上下文，默认为 webpack.config.js

publicPath：为你的文件配置自定义 public 发布目录

outputPath：为你的文件配置自定义 output 输出目录

2.字体文件处理

（1）下载字体文件

以bootstrap字体文件为例子，Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

（2）在index.js中引入bootstrap.css，在html中使用bootstrap字体图标

（3）配置config文件

3.第三方js库处理

以jquery库为例子

（1）本地导入

编写配置文件：

webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去。

使用webpack.ProvidePlugin前需要引入webpack

（2）npm安装模块

安装jquery库：yarn add --dev jquery

直接在js里import引入: import $ from 'jquery'

编译ES6

(1) 了解babel

目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具。

babel转化语法所需依赖项：

babel-loader: 负责es6语法转化

babel-core: babel核心包

babel-preset-env: 告诉babel使用哪种转码规则进行文件处理

(2) 安装依赖

yarn add --dev babel-loader @babel/core @babel/preset-env

(3) 配置config文件

exclude表示不在指定目录查找相关文件

(4) 根目录新建 .babelrc 文件配置转换规则

(5) 另一种规则配置

 

使用html-webpack-plugin生成html

1.了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里。

2.生成依赖

yarn add html-webpack-plugin --dev

3.配置config文件

 

提起分离css

1.处理效果

将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件

2.mini-css-extract-plugin插件

（1）安装（下载）

yarn add --dev mini-css-extract-plugin

（2）配置config文件

引入插件：

rules设置：

Plugins设置：