Webpack——【入门篇-上篇】-一一网

已同步语雀：www.yuque.com/go/doc/5319…

github：www.yuque.com/go/doc/5319…

本系列为Webpack——入门篇，包括：

1、Webpack——【入门篇-上篇】【本篇】juejin.cn/post/695439…

2、Webpack——【入门篇-中篇】juejin.cn/post/695438…

3、Webpack——【入门篇-下篇】juejin.cn/post/695438…

webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器

前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理；webpack将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

00 常用loader&plugin

资源类型

loader/plugin

用途

css

style-loader || MiniCssExtractPlugin.loader

css-loader

less-loader

打包样式资源

css

optimize-css-assets-webpack-plugin

压缩css

css

mini-css-extract-plugin

提取css为独立文件

css

postcss-loader

postcss-reset-env

css兼容性处理

html

html-webpack-plugin

处理html，压缩html

eslit

eslint-loader

eslint-config-airbnb-base

eslint-plugin-import

语法检查

npm i babel-loader @babel/core -D

总结：结合1、3做兼容性处理

基本js兼容性处理 –> @babel/preset-env
npm i @babel/preset-env -S
问题：只能转换基本语法，如promise高级语法不能转换
全部js兼容性处理 –> @babel/polyfill
npm i @babel/polyfill -S
问题：我只要解决部分兼容性问题，但是将所有的兼容性代码全部引入，体积太大了
高级语法，需要做兼容性处理的就：按需加载 –> core-js

js兼容处理

mode=“production“ UglifyJsPlugin

压缩js

img

url-loader

处理图片

img

html-loader

处理html中的图片

其他资源

file-loader

处理其他资源，如字体文件

01 webpack 的五个核心概念

entry：指示 webpack 以哪个文件作为入口起点开始打包，分析构建内部依赖图
output：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名
loader：让 webpack 能去处理那些非 js 文件（如 css、html、img 等），webpack 自身只能理解 js（js、json）
plugins：插件可以用于执行范围更广的任务，插件的范围包括，从打包到优化和压缩，一直到重新定义环境中的变量等
mode：指示 webpack 使用相应模式模式的配置，webpack 内置的两种模式如下：

选项

描述

特点

development

会将 process.env.NODE_ENV 的值设为 development。启NamedChunksPlugin和NamedModulesPlugin

能让代码本地调试、运行的环境

production

会将 process.env.NODE_ENV 的值设置为 production。启用FlagDependencyUsagePlugin，FlagIncludeChunksPlugin，ModuleConcatelationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和UglifyJsPlugin

能让代码优化、上线运行的环境

02 安装

npm install webpack webpack-cli -g
npm install webpack webpack-cli -D //开发时依赖
复制代码

03 初体验

04 打包样式资源

./src/main.js

import from './index.css';  //新建样式资源并引入
import './index.less'; //如果样式资源文件是空的，webpack配置没有处理less资源，在终端执行webpack打包，不会报错
复制代码

新建 webpack.config.js

/*
webpack.config.js webpack的配置文件
作用：指示 webpack 干哪些活（当运行webpack时，会加载里面的配置）

所有构建工具都基于node.js平台运行的，模块化默认采用common.js
（配置文件采用common.js src下是es6）
 */

 /*
 loader：1.下载 2.使用（配置loader）
  plugins：1.下载 2.引入 3.使用
 */

const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    // webpack配置
    entry: './src/main.js',
    output: {
        // 文件名
        filename: 'main.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录的绝对路径
        path: resolve(__dirname, 'dist')
    },
    // loader的配置
    module: {
        rules: [
            {
                test: /\.css/,
                use: [//使用哪些loader，执行顺序是从下至上；或者说从右到左，依次执行
                    // npm i style-loader css-loader -D
                    // 创建style标签，将js中的样式资源插入到标签中，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ],
            },
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less资源编译成css
                    //npm i less less-loader -D
                    'less-loader'
                ]
            }
        ],
    },
    plugins: [],
}
}
复制代码

在终端执行 webpack，可以看到打包到的./dist/main.js 中引入了 index.css 和 index.less

在./dist 下新建 index.html，因为目前还未处理 html 资源；引入打包后的 main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script src="https://juejin.cn/post/main.js"></script>
  </body>
</html>
复制代码

在浏览器打开，可以看到样式效果生效，并且插入的 css、less 经过 loader 处理为 style 标签插入

05 打包 html 资源

npm i html-webpack-plugin -D

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
    ...
    plugins: [
        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）new HtmlWebpackPlugin()
        new HtmlWebpackPluign({
             // 复制'./src/index.html'文件，并自动引入打包输出的所有资源（js/css）
            template: './src/index.html'
        })
    ]
}
复制代码

单独配置 new HtmlWebpackPlugin()和 new HtmlWebpackPluign({template: ‘./src/index.html’ })分别在终端执行 webpack，可以看到输出的./dist/index.html 文件不一样

06 打包图片资源

处理 css 中的 img

index.html

<div class="code"></div>
<div class="vue"></div>
复制代码

index.less

.code {
  background: url(./code.jpg) //42kb
;
}
.vue {
  background: url(./vue.jpg) //6kb
;
}
复制代码

这时候在终端执行 webpack 会报错

ERROR in ./src/code.jpg 1:0 ...
复制代码

webpack.config.js

npm i url-loader file-loader -D

module.export = {
    ...
    module: {
        rules: [
             ...
            {
                //处理图片资源
                test: /\.(jpg|jpg|gif)$/,
                //只要使用一个loader时，用loader声明，多个时，用use
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会变大，转换成base64字符串格式之后，所以大图片不转换成base64处理，小图片几kb影响不大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // 给图片进行重命名
                    // [hash:10]取图片的hash前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]',
                    outputPath: "imgs", // 构建后路径 /dist/imgs
                }
            }
            ...
        ]
    }
}
复制代码

再次执行 webpack，可以打包后结果是一张图片，是 code.jpg；vue.jpg 被转成了 base64

处理 html 中的 img

index.html

<img src="https://juejin.cn/post/vue.jpg" />
复制代码

直接执行 webpack 命令，打包结果如下

<img src="https://juejin.cn/post/vue.jpg" />
复制代码

打包后代码不变，打包结果没有 vue.jpg，无法正常显示；默认处理不了 html 中的 img 图片，因为根本解析不到

npm i html-loader -D 加入 html-loader 处理

webpack.config.js

module.export = {
    ...
    module: {
        rules: [
             ...
            {
                //处理html中图片资源 npm i html-loader -D
                test: /\.html$/,
                //处理html中的img，负责引入img，从而能被url-loader处理
                loader: 'html-loader',
            }
            ...
        ]
    }
}
复制代码

webpack 打包资源出现

Automatic publicPath is not supported in this browser

解决方法：

在 webpack.config.js 文件中添加module.exports = { output: { publicPath: ‘./’ } }；或webpack 打包 html 里面 img 后 src 为“[object Module]”问题，esModule 默认为 true，手动设置为 false；可参考 www.jb51.net/article/176…；再次执行 webpack 命令，打包结果如下

dist/index.html

 <img src="https://juejin.cn/imgs/be82e5eef9.jpg" />
复制代码

index.html 和 index.less 都引入了 vue.jpg 但是最后只打包成一张图片

07 打包其他资源（字体文件）

在 iconfont 下载字体文件在/src/font 目录下

main.js

// 引入iconfont样式文件
import "./font/iconfont.css";
复制代码

index.html

<span class="iconfont icon-dollar"></span>
复制代码

webpack.config.js

 // 打包其他资源（除html、css、js之外的资源）比如字体文件
{
    // 排除html、css、js资源）
    exclude: /\.(css|js|html|less|jpg)$/,
    loader: 'file-loader',
    options: {
        name: '[hash:10].[ext]'
    }
}
复制代码

执行 webpack 命令，在 dist 目录下可以看到打包的字体文件，打开 dist/index.html 可以看到引入的图标生效

08 配置 devServer

    // 开发服务器：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    // 特点：没有输出，只会在内存中编译打包，不会有任何输出
    // npx 想要解决的主要问题，就是调用项目内部安装的模块 http://www.ruanyifeng.com/blog/2019/02/npx.html
    // 启动devserver的命令为：npx webpack-dev-server(webpack4)
    // 启动devserver的命令为：npx webpack serve(webpack5)
    // 原理：https://segmentfault.com/a/1190000006964335?utm_source=tag-newest
    // npm i webpack-dev-server -D
    devServer: {
        contentBase: resolve(__dirname, 'dist'),// 项目构建后路径
        compress: true,// 启动gzip压缩
        port: 3000,// 端口号
        open: true// 自动打开浏览器
    },
复制代码

已同步语雀：www.yuque.com/go/doc/5319…

github：www.yuque.com/go/doc/5319…

本系列为Webpack——入门篇，包括：

1、Webpack——【入门篇-上篇】【本篇】juejin.cn/post/695439…

2、Webpack——【入门篇-中篇】juejin.cn/post/695438…

3、Webpack——【入门篇-下篇】juejin.cn/post/695438…

文章版权归作者所有，未经允许请勿转载。

THE END

前端