Webpack Webpack打包文件配置基本使用

程序员文章站 2022-07-12 21:00:43

...

webpack

1 概念

1.0 webpack发展历史

2012.02.10 —> webpack诞生
2014.04 —> webpack1
2016.12 —> webpack2
2017.06 —> webpack3
2018.02 —> webpack4
2020.10 —> webpack5（Node.js 10.13+）

1.1 官方解释

从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
- 模块（模块化开发，可以提高开发效率，避免重复造*）
- 打包（将各个模块，按照一定的规则组装起来）
当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。

grunt/gulp和webpack的不同
1. grunt/gulp更加情调的是前端流程的自动化，模块化不是他的核心。
2. webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能是它附带的动能。
node.js版本14.16；webpack版本3.6.0
打包：webpack ./src/main.js ./dist/bundle.js

1.2 功能

有好的模块化支持。
合并打包多个文件，减少http请求次数，提高效率。
编译代码，确保浏览器兼容性。
压缩代码，减少文件体积，提高加载速度。
监测代码格式，确保代码质量。
提供热更新服务，提高开发效率。
针对不同环境，提供不同的打包策略。

1.3 核心概念

webpack的一些核心概念
1. 入口（entry）
2. 输出（output）
3. loader
4. 插件（plugin）
5. 模式（mode）
6. 浏览器兼容性（browser compatibility）
7. 环境（environment）
模块打包工具理念及底层运行
1. 手动打包一个应用程序
2. 实施创建一个打包工具
3. 一个简单打包工具的详细说明

1.4 入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

描述入口的对象
- 用于描述入口的对象。你可以使用如下属性：
  - dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
  - filename: 指定要输出的文件名称。
  - import: 启动时需加载的模块。
  - library: 指定 library 选项，为当前 entry 构建一个 library。
  - runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使用现有的入口作为运行时。
  - publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。

1.5 输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。

1.6 loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
在 webpack 的配置中，loader 有两个属性：
1. test 属性，识别出哪些文件会被转换。
2. use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

注意
1. 在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。
2. 使用正则表达式匹配文件时，不要为它添加引号。

1.7 插件（plugin）

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
想要使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle。

1.8 模式（mode）

mode参数
1. development
2. production
3. none
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
```
module.exports = {
  mode: 'production',
};
```

1.9 浏览器兼容性（browser compatibility）

webpack 支持所有符合 ES5 标准的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。

1.10 环境（environment）

webpack 5 运行于 Node.js v10.13.0+ 的版本。

2 入口（entry）

2.1 基本使用

运行npm init -y命令，初始化包管理配置文件package.json
在项目中安装和配置webpack
1. 运行npm install webpack webpack-cli -D命令，安装webpack相关的包。
2. 在项目根目录中创建webpackage.config.js配置文件。
3. 在webpack配置文件中初始化基本配置
  - 在开发时使用development模式
  - 项目上线时使用production模式
```
module.exports = {
    made:'development',	//mode用来指定创建模式
}
```
4. 在package.json配置文件中的scripts节点下，新增dev脚本
```
"script":{
    "dev":"webpack"	//script节点下的脚本，可以通过npm run执行
}
```
5. 在终端中运行npm run dev命令，启动webpack进行项目打包。

2.2 配置打包的入口和出口

默认约定
- 打包的入口文件为：src —> index.js
- 打包的输出文件为：src —> main.js

配置入口出口信息

webpack.config.js文件
entry：打包入口文件的路径
output：出口文件
- path：输出文件的存放路径
- filename：输出文件的名称

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
    },
};

2.3 配置webpack的自动打包功能

运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具。

修改package.json —>script中的dev命令如下

"script":{
    "dev":"webpack-dev-server"	//script节点下的脚本，可以通过npm run执行
}

将src —> index.html中，script脚本的引用路径修改为"/buld.js"
运行npm run dev命令，重新进行打包。
浏览器访问http://localhost:8080地址，查看自动打包效果。

2.4 配置html-webpack-plugin生成预览界面

运行npm install html-webpack-plugin -D命令，安装生成预览界面的插件。

2.5 配置自动打包相关的配置

4 webpack中的加载器

4.1 通过loader打包非js模块

webpack默认只能打包处理.js文件模块，其它非.js模块webpack默认处理不了，需要调用loader加载器才可以正常打包。
loader加载器可以协助webpack打包处理特定的文件模块
1. less-loader可以打包处理.less相关的文件。
2. sass-loader可以打包处理.scss相关的文件。
3. url-loader可以打包处理css中与url路径相关的文件。

4.1.1 打包处理css文件

运行npm install style-loader css-loader -D命令，安装处理css文件的loader。
在wenpack.config.js的module —> rules数组中，添加loader规则如下：
- test表示匹配的文件类型
- use表示对应要调用的loader
  - use数组中指定的loader顺序是固定的。
  - 多个loader的调用顺序是：从后往前调用。
```
module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    },
}
```

4.1.2 打包处理less文件

运行npm install less-loader less -D命令，安装处理css文件的loader。

在wenpack.config.js的module —> rules数组中，添加loader规则如下：

module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    },
}

4.1.3 打包处理scss文件

运行npm install sass-loader node-sass -D命令，安装处理css文件的loader。

在wenpack.config.js的module —> rules数组中，添加loader规则如下：

module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
        ]
    },
}

4.1.4 配置postCSS自动添加css的兼容前缀

运行npm install postcss-loader autoprefixer -D命令，安装处理css文件的loader。

在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置：

//导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')

module.exports = {
    //挂载插件
    plugins:[autoprefixer],
}

在wenpack.config.js的module —> rules数组中，修改css的loader规则如下：

module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
        ]
    },
}

4.1.5 打包样式表中的图片和字体文件

运行npm install url-loader file-loader -D命令，安装处理css文件的loader。

在wenpack.config.js的module —> rules数组中，添加loader规则如下：

?后面的是loader的参数项
limit用来指定图片的大小，单位是字节（byte），只有字节小于limit的图片才会被转为base64图片。

module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use:['url-loader?limit=16940'],
            }
        ]
    },
}

4.1.6 打包处理js文件中的高级语法

安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D命令，安装处理css文件的loader。
安装babel语法插件相关的包：npm install @babel/present-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D命令，安装处理css文件的loader。

在项目根目录中创建babel的配置文件babel.config.js，并初始化如下配置：

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在wenpack.config.js的module —> rules数组中，修改css的loader规则如下：

module.exports = {
    //所有第三方文件模块的匹配规则
    module:{
        rules:[
            //exclude为排除项，表示babel-loader不需要处理node-modules中的js文件
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
        ]
    },
}

Webpack Webpack打包文件配置基本使用

文章目录

webpack

1 概念

1.0 webpack发展历史

1.1 官方解释

1.2 功能

1.3 核心概念

1.4 入口（entry）

1.5 输出（output）

1.6 loader

1.7 插件（plugin）

1.8 模式（mode）

1.9 浏览器兼容性（browser compatibility）

1.10 环境（environment）

2 入口（entry）

2.1 基本使用

2.2 配置打包的入口和出口

2.3 配置webpack的自动打包功能

2.4 配置html-webpack-plugin生成预览界面

2.5 配置自动打包相关的配置

4 webpack中的加载器

4.1 通过loader打包非js模块

4.1.1 打包处理css文件

4.1.2 打包处理less文件

4.1.3 打包处理scss文件

4.1.4 配置postCSS自动添加css的兼容前缀

4.1.5 打包样式表中的图片和字体文件

4.1.6 打包处理js文件中的高级语法

webpack3、4的基本的使用方法

为什么我们要做三份 Webpack 配置文件

在webpack中使用eslint配置（详细教程）

vue-cli webpack配置文件分析

electron-vue利用webpack打包实现多页面的入口文件问题

详解如何使用webpack打包多页jquery项目

vue-cli webpack配置文件分析

新手快速上手webpack4打包工具的使用详解

webpack配置文件和常用配置项介绍

vue解决使用webpack打包后keep-alive不生效的方法