webpack打包工具 入门学习 1

一、webpack是什么？

官网地址：https://webpack.js.org/

webpack is a module bundler(模块打包⼯具)

Webpack 是⼀个打包模块化 JavaScript 的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中

 

是⼯程化、⾃动化思想在前端开发中的体现

二、安装

因为webpack是基于node.js的，所以需要先安装nodeJs，

NodeJs https://nodejs.org/en/

版本参考官⽹发布的最新版本，可以提升 webpack 的打包速度

 

1.全局安装 不推荐

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g

# 检查版本
webpack -v

# 卸载
npm uninstall webpack webpack-cli -g

全局安装 webpack ，这会将你项⽬中的 webpack 锁定到指定版本，造成不同的项⽬中因为 webpack 依赖不同版本⽽导致冲突，构建失败

 

2.项⽬安装 推荐

# 安装最新的稳定版本
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta

# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

3.检查安装

webpack -v //command not found 默认在全局环境中查找

npx webpack -v// npx帮助我们在项⽬中的node_modules⾥查找webpack
./node_modules/.bin/webpack -v//到当前的node_modules模块⾥指定
webpack

4.创建项目并安装webpack

mkdir webpack-demo

cd webpack-demo

// 初始化package.json文件
npm init -y

// 安装webpack
npm i webpack webpack-cli -D

// 安装完成后查看版本
npx webpack -v

创建完成后，项目结构如下：

• node_modules
• package.json
• package-lock.json

三、启动webpack执⾏构建

1.webpack默认配置

• webpack默认⽀持JS模块和JSON模块
• ⽀持CommonJS Es moudule AMD等模块类型
• webpack4⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展

2.准备执行构建

这里需要新建文件进行测试：

新建src(与package.json同级)文件及在src下新建src/index.js、src/index.json、src/other.js文件，内容如下：

### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));

### index.json
{
 "name": "JOSN"
}

### other.js
export function add(n1, n2) {
 return n1 + n2; }

修改 package.json ⽂件：

"scripts": {
 "test": "webpack"
},

3.执行构建

二者选一即可

# npx⽅式
npx webpack

# npm script
npm run test

原理就是通过 shell 脚本在 node_modules/.bin ⽬录下创建⼀个软链接。

4.构建成功

构建后会发现dist文件夹及其下的main.js文件，这个⽂件是⼀个可执⾏的JavaScript⽂件，⾥⾯包含webpackBootstrap启动函数：

5.默认配置

现在的配置情况等价于下方的代码：

const path = require("path");
module.exports = {
 // 必填 webpack执⾏构建⼊⼝
 entry: "./src/index.js",
 output: {
 // 将所有依赖的模块合并输出到main.js
 filename: "main.js",
 // 输出⽂件的存放路径，必须是绝对路径
 path: path.resolve(__dirname, "./dist")
 }
};

四、webpack配置核⼼概念

零配置是很弱的，特定的需求，总是需要⾃⼰进⾏配置

webpack有默认的配置⽂件，叫 webpack.config.js ，我们可以对这个⽂件进⾏修改，进⾏个性化配置

• 使⽤默认的配置⽂件：webpack.config.js
• 不使⽤⾃定义配置⽂件： ⽐如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使⽤哪个配置⽂件来执⾏构建

webpack.config.js配置基础结构

module.exports = {
	 entry: "./src/index.js", //打包⼊⼝⽂件
	 output: "./dist", //输出结构
	 mode: "production", //打包环境
	 module: {
		 rules: [
			//loader模块处理
			{
				 test: /\.css$/,
				 use: "style-loader"
			}
		 ]
	 },
	plugins: [new HtmlWebpackPlugin()] //插件配置
};

1.entry:

指定 webpack 打包⼊⼝⽂件 :Webpack 执⾏构建的第⼀步将从 Entry 开始，可抽象成输⼊

//单⼊⼝ SPA，本质是个字符串
entry:{
 main: './src/index.js'
}

==相当于简写===
entry:"./src/index.js"

//多⼊⼝ entry是个对象
entry:{
 index:"./src/index.js",
 login:"./src/login.js"
}

2.output:

打包转换后的⽂件输出到磁盘位置 : 输出结果，在 Webpack 经过⼀系列处理并得出最终想要的代码后输出结果。

output: {
 filename: "bundle.js",//输出⽂件的名称
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必
须是绝对路径
},
 
//多⼊⼝的处理
output: {
 filename: "[name][chunkhash:8].js",//利⽤占位符，⽂件名称不要重
复
 path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录，必
须是绝对路径
},

 “__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

3.mode

Mode ⽤来指定当前的构建环境

• production
• development
• none

设置 mode 可以⾃动触发 webpack 内置的函数，达到优化的效果

开发阶段的开启会有利于热更新的处理，识别哪个模块变化

⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能

 

4.loader

模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。

webpack 是模块打包⼯具，⽽模块不仅仅是 js ，还可以是 css ，图⽚或者其他格式

但是 webpack 默认只知道如何处理 js 和 JSON 模块，那么其他格式的模块处理，和处理⽅式就需要 loader 了

 

常⻅的 loader

 

• style-loader
• css-loader
• less-loader
• sass-loader
• ts-loader //将Ts转换成js
• babel-loader//转换ES6、7等js新特性语法
• file-loader//处理图⽚⼦图
• eslint-loader

5.moudle

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。 Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

当 webpack 处理到不认识的模块时，需要在 webpack 中的 module 处进⾏配置，当检测到是什么格式的模块，使⽤什么 loader 来处理。

module:{
	 rules:[
		 {
			 test:/\.xxx$/,//指定匹配规则
			 use:{
				loader: 'xxx-load'//指定使⽤的loader
			 }
		 }
	 ]
}

loader有顺序，从右到左，从下到上

file-loader

原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称

所以我们什么时候⽤ file-loader 呢？

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤ file-loader 来处理， txt ， svg ， csv ， excel ，图⽚资源啦等等

npm install file-loader -D

案例：

module: {
  rules: [{
     test: /\.(png|jpe?g|gif)$/,
     //use使⽤⼀个loader可以⽤对象，字符串，两个loader需要⽤数组
     use: {
         loader: "file-loader",
         // options额外的配置，⽐如资源名称
         options: {
             // placeholder 占位符 [name]⽼资源模块的名称
             // [ext]⽼资源模块的后缀
             // https://webpack.js.org/loaders/file-loader#placeholders
             name: "[name]_[hash].[ext]",
             //打包后的存放位置
             outputPath: "images/"
         }
     }
 }]
}

index.js

import pic from "./logo.png";
var img = new Image();
img.src = pic;
img.classList.add("logo");
var root = document.getElementById("root");
root.append(img);

处理字体：https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.12&puhui=1#!/webfont/index

将下载的文件存放于src下

//css
@font-face {
 font-family: "webfont";
 font-display: swap;
 src: url("webfont.woff2") format("woff2");
}

body {
 background: blue;
 font-family: "webfont" !important; }

//webpack.config.js
{
 test: /\.(eot|ttf|woff|woff2|svg)$/,
 use: "file-loader"
}

url-loader  file-loader 加强版本

url-loader 内部使⽤了 file-loader, 所以可以处理 file-loader 所有的事情，但是遇到 jpg 格式的模块，会把该图⽚转换成 base64 格式字符串，并打包到 js ⾥。对⼩体积的图⽚⽐较合适，⼤图⽚不合适

npm install url-loader -D

 案例：

module: {
    rules: [
        // 处理图片
        {
            test: /\.(png|jpe?g|gif)$/,
            use: [{
                loader: "url-loader",
                options: {
                    name: "[name]_[hash:8].[ext]",
                    outputPath: "images/",
                    // 小于2048，转换为base64
                    limit: 2048
                }
            }]
        }
    ]
}

样式处理css-loader

Css-loader 分析 css 模块之间的关系，并合成⼀个 css

 

Style-loader 会把 css-loader ⽣成的内容，以 style 挂载到⻚⾯的 heade 部分

npm install style-loader css-loader -D

{
	test: /\.css$/,
	use: [
		{
			loader: "style-loader",
			options: {
				// 将多个style标签合并为一个
				injectType: "singletonStyleTag"
			}
		},
		"css-loader"
	]
}

 

Less样式处理

less-load 把 less 语法转换成 css

npm install less less-loader --save-dev

案例：

{
	 test: /\.scss$/,
	 use: ["style-loader", "css-loader", "less-loader"]
}

样式自动添加前缀

https://caniuse.com/

Postcss-loader

npm i postcss-loader autoprefixer -D

新建 postcss.config.js

//webpack.config.js
{
 test: /\.css$/,
 use: ["style-loader", "css-loader", "postcss-loader"]
},
//postcss.config.js
module.exports = {
 plugins: [
 require("autoprefixer")({
 overrideBrowserslist: ["last 2 versions", ">1%"]
 })
 ]
};

 

 

 

五、Plugins

plugin 可以在 webpack 运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念

扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。

作⽤于整个构建过程

 

HtmlWebpackPlugin

htmlwebpackplugin 会在打包结束后，⾃动⽣成⼀个 html ⽂件，并把打包⽣成的 js 模块引⼊到该 html 中。

npm install --save-dev html-webpack-plugin

配置

title: ⽤来⽣成⻚⾯的 title 元素
filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦
⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊所有的资源到特定的
template 或者 templateContent 中，如果设置为 true 或者 body，所有的
javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素
中。
favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加⼀个唯⼀的 webpack 编译 hash
到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有⽤。
cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发
布⽂件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到
HTML ⻚⾯中
chunks: 允许只添加某些块 (⽐如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none'
| 'default' | {function}-default:'auto'
excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

案例

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
 ...
	 plugins: [
		 new htmlWebpackPlugin({
			title: "My App",
            template: "./src/index.html",
            filename: "main.html"		 
		})
	]
}

index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

运行后：

我这个文件产生的标题

在dist内产生的html文件

 

clean-webpack-plugin

每次的运行时，先清空dist内的所有文件

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
 new CleanWebpackPlugin()
]

mini-css-extract-plugin

用于生成独立的css文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

{
 test: /\.css$/,
 use: [MiniCssExtractPlugin.loader, "css-loader"]
}


 new MiniCssExtractPlugin({
     filename: "[name][chunkhash:8].css"
 })

六.sourceMap

源代码与打包后的代码的映射关系，通过 sourceMap 定位到源代码。在 dev 模式中，默认开启，关闭的话 可以在配置⽂件⾥

devtool:"none"

devtool 的介绍： https://webpack.js.org/configuration/devtool#devtool

• eval:速度最快,使⽤eval包裹模块代码,
• source-map： 产⽣ .map ⽂件
• cheap:较快，不包含列信息
• Module：第三⽅模块，包含loader的sourcemap（⽐如jsx to js ，babel的
• sourcemap）
• inline： 将 .map 作为DataURI嵌⼊，不单独⽣成 .map ⽂件

配置推荐：

devtool:"cheap-module-eval-source-map",// 开发环境配置

//线上不推荐开启
devtool:"cheap-module-source-map", // 线上⽣成配置

最后，这个是完整的webpack.config.js文件：

// webpack是基于node.js的
//! 要使用commonjs规范导出一个对象

// commonjs规范
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    // webpack执⾏构建⼊⼝
    entry: "./src/index.js",
    // 输出
    output: {
        // 输出到那里，必须为绝对路径
        path: path.resolve(__dirname, "./dist"),
        filename: "main.js"
    },
    // 模式
    mode: "development",
    // 处理模块
    module: {
        // 这些loder（加载器）是需要额外安装的
        //! loader 是由执行顺序的，自右往左
        rules: [
            // 处理图片
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "[name]_[hash:8].[ext]",
                        outputPath: "images/"   // 将图片存放在images下
                    }
                }]
            },{
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader",
                        options: {
                            // 将多个style标签合并为一个
                            injectType: "singletonStyleTag"
                        }
                    },
                    "css-loader"
                ]
            },{
                test: /\.woff2$/,
                use: ["file-loader"]
            },{
                test: /\.less$/,
                use: [
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader","postcss-loader","less-loader"]
            }
        ]
    },
    devtool: "source-map",  // 一般用于开发环境，生产环境的为none
    // 作用于webpack的整个周期
    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            template: "./src/index.html",
            filename: "main.html"
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name]_[chunkhash:8].css"
        })
    ]
}

其他的代码均在介绍处有展示。

总结

本文主要介绍了wbpack、wenpack的安装、项目构建、webpack的配置（入口，出口、模式、加载器、模块、插件）、及sourceMap及对应的使用方法，并展示了代码。