阅读 269

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)

image.png

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

js

eslit

eslint-loader

eslint-config-airbnb-base

eslint-plugin-import

语法检查

js

npm i babel-loader @babel/core -D

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

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

js兼容处理

js

mode=“production“ UglifyJsPlugin

压缩js

img

url-loader

处理图片

img

html-loader

处理html中的图片

其他资源

file-loader

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

01 webpack 的五个核心概念

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

选项

描述

特点

development

会将 process.env.NODE_ENV 的值设为 development。启NamedChunksPluginNamedModulesPlugin

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

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="main.js"></script>
  </body>
</html>
复制代码

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

image

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

image

处理 html 中的 img

index.html

<img src="./vue.jpg" />
复制代码

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

<img src="./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="/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…

文章分类
前端
文章标签