webpack5入门配置详解

本文最后更新于:2022年5月1日 凌晨

webpack基本配置

我们现在项目很多都是基于webpack打包以及优化,如果是使用create-react-app的话里面有很多配置又是我们不需要的,这里简单配置一下基础的webpack,本文章基于webpack^5.0.

当需要选择React项目快速开始,但是create-react-app的配置又太繁琐,我选择自己配置的gitee地址

Webpack的项目初始化

  1. 首先我们需要创建一个项目的初始化:

    npm init;创建一个package.json文件;

  2. 我们安装webpack:

    npm install webpack webpack-cli -D; 参数-D表示我们安装在开发环境下

    webpack4x开始便可以0配置打包,当按照上面命令执行,出现如下项目结构:

    1
    2
    3
    4
    project-name                 
    ├─ src
    │ └─ index.js
    └─ package.json

    执行npx webpack,出现dist目录就已经打包好了;

Webpack项目自定义文件

单独配置webpack文件:

在根目录下新建一个webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
const path = require('path')

module.exports = {
// webpack运行模式,development---开发环境下, production --- 生产环境下,none
mode: 'development',
entry: './src/index.js', // 单文件打包入口地址
output: {
filename: 'bundle.js', // 打包输出文件名
path: path.join(__dirname, 'dist'), // 打包输出文件目录
clear: true, // 每次打包自动清空输出文件夹
}
}
多入口文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require('path')
module.exports = {
// ...
// 多入门文件打包,entry 的 key会打包成输出文件的 chunk 名
entry: {
main:path.resolve(__dirname,'../src/main.js'),
header:path.resolve(__dirname,'../src/header.js')
},
output: {
filename: 'bundle.js', // 打包输出文件名
path: path.join(__dirname, 'dist'), // 打包输出文件目录
clear: true, // 每次打包自动清空输出文件夹
}
// ...
}
多Html文件模板打包
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins:[
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html'),
filename:'index.html',
// 与入口文件对应的模块名,会引入对应的对应文件js到html中,不写的话默认引入全部的chunk
chunks:['main']
}),
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/header.html'),
filename:'header.html',
chunks:['header']
}),
]
}

Loader

webpack只能处理js或者json文件,处理其他文件需要借助Loader,Loader 就是将 Webpack 不认识的内容转化为认识的内容

在module => rlues => use 的转换规则是从右向左开始解析;

css-loader 和 style-loader

npn install css-loader style-loader -D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js
const path = require('path')

module.exports = {
// ... 接上面的内容
module: {
rules: [ // 转换规则
{
test: /\.css$/, //匹配所有的 css 文件
use: ['style-loader','css-loader'] // use: 对应的 Loader 名称
}
]
}
}
postcss-loader

npm i -D postcss-loader autoprefixer

  • postcss-loader 是作为webpack插件处理postcss的;
  • postcss是为了将代码的css抽象成一个树,压缩以及识别错误等,类似于css的babel
  • autoprefixer 是为了给不用的浏览器加上前缀标识,比如-webkit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// webpack.config.js
const path = require('path')

module.exports = {
// ... 接上面的内容
module: {
rules: [ // 转换规则
{
test: /\.css$/, //匹配所有的 css 文件
use: [
'css-loader',
{
loader: 'postcss-loader',
options:{
plugins:[require('autoprefixer')]
}
}
]
},
]
}
}

// 在根目录下新建 postcss.config.js
module.exports = {
plugins: [require('autoprefixer')] // 引用插件
}
file-loader 和 url-loader

npm install file-loader url-loader -D

一般结合使用用来引入图片文字等资源;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// webpack.config.js
const path = require('path')

module.exports = {
// ... 接上面的内容
module: {
rules: [ // 转换规则
{
test: /\.(jpe?g|png|gif)$/i, //匹配所有的 静态资源 文件
type: "javascript/auto", // 在webpack5后需要这样写才能在css或者js中匹配静态资源路径
loader: "file-loader",
options: {
esModule: false,
loader: "url-loader",
name: "images/[name].[ext]" // 放在images下, [name]保留原始文件名,[ext]保留原始后缀名
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]' // 同上,[hash:8]根据内容名称变成hash值保留8位
}
}
}
}
]
},
]
}
}
babel

npm i -D babel-loader @babel/preset-env @babel/core

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// webpack.config.js
module.exports = {
// 省略其它配置 ...
module:{
rules:[
{
test:/\.(js|jsx)$/,
use:[
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
],
exclude:/node_modules/
},
]
}
}

// 除此之外我们还需要新建 .babelrc 文件在根目录下
// S6/7/8语法转换为ES5语法,还有例如(promise、Generator、Set、Maps、Proxy等)
// .babelrc,分为预设---preset, 插件---plugins
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
less

npm install -D less less-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// webpack.config.js
module.exports = {
// 省略其它配置 ...
module:{
rules:[
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
] // 此外还需要安装less模块
},
]
}
}

Plugin

插件(Plugin)可以贯穿 Webpack 打包的生命周期,执行不同的任务

html-webpack-plugin

可以把js 或者 css 文件可以自动引入到 Html 中;

npm install -save html-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
// ... 接上面的内容
plugins:[
new HtmlWebpackPlugin({
// 指定需要引入的html模板
template: './public/index.html'
})
]
}

devServer

这是在开发环境下的设置,比如端口,热更新,自动打开浏览器等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// webpack.config.js
module.exports = {
// ...
devServer: {
contentBase: path.resolve(__dirname, 'public'), // 静态文件目录
compress: true, //是否启动压缩 gzip
port: 8080, // 端口号
open:true, // 是否自动打开浏览器
host: "0.0.0.0", // 指定使用的host
proxy: {
'/api': 'http://localhost:3000',
},
// 为所有的请求添加 header
headers: {
'X-Custom-Foo': 'bar',
},
client: {
// 当报错的时候是否全屏显示
overlay: false,
/* 只显示错误不显示警告
overlay: {
errors: true,
warnings: false,
},
*/
},
},
// ...
}

package.json

我们在每次执行不同命令打包或者启动项目时候,需要区分开发环境,生产环境

开发环境

  • 需要更快的构建速度
  • 需要保留debug/console信息
  • 需要 live reload 或 hot reload 功能
  • 需要 sourcemap 方便定位问题
  • ….

生产环境

  • 需要更小的包体积
  • 需要进行代码分割
  • 需要压缩图片体积
区分开发环境和生产环境

需要安装两个依赖:

npm install cross-env -D

npm intall webpack-dev-server -D

1
2
3
4
5
6
// package.json
"scripts": {
// --config webpack-config/webpack.dev.js 不同的模式下去运行不同的文件
"start": "cross-env NODE_ENV=development webpack server --config webpack-config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config webpack-config/webpack.prod.js"
},
1
2
//  在webpack.config.js文件中我们可以打印出来,我们设置的环境变量
console.log('process.env.NODE_ENV=', process.env.NODE_ENV)

webpack5入门配置详解
http://www.clearluv.com/2022/05/01/webpack5/
发布于
2022年5月1日
许可协议