webpack进行前端开发工程环境搭建

在阅读这篇文章之前,请确认你已经了解了webpack的基本常识

还不了解?点击查看《webpack基础》

安装依赖

多人协作时,可以在项目根目录下新建一个.npmrc文件用来指定npm源

1
2
3
# 统一团队的npm源
registry=https://registry.npm.taobao.org
# 使用npm install的时候就会默认淘宝源

项目搭建

样式 静态资源 (图片第三方字体) es6+ (vue react ts)

样式:借助css-loader处理css语法,借助style-loader使用css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module: {
rules: [
{
// webpack处理css内容
test: /\.css$/,
// 多个loader情况下 执行顺序自后往前
use: ["style-loader", "css-loader"],
},
{
test:/\.less$/,
// 先将less语法转成css语法
use: ["style-loader", "css-loader","less-loader"]
},
{
test:/\.scss$/,
use: ["style-loader", "css-loader","sass-loader"]
},
],
},

postcss官网

1
2
3
4
5
6
7
根目录下新增`postcss.config.js`
module.exports = {
plugins:[
require("autoprefixer"),// 浏览器兼容
require("cssnano") // css 压缩
]
}

package.json"browserslist":["last 2 versions","> 1%"]用于配置autoprefixer自动兼容版本(兼容所有浏览器最近的两个大版本,全球市场占有率大于1%的浏览器)
更多点击 –> Browserslist

安装mini-css-extract-plugin用来做样式提取,将css样式抽离成css文件

1
npm install mini-css-extract-plugin -D

修改webpack.config.js中的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const minicssExtractPlugin = require('mini-css-extract-plugin')//先进行引用

module.exports = {
...
module: {
rules: [
...
{
test:/\.less$/,
// 将style-loader替换成minicssExtractPlugin自带的loader
use: [minicssExtractPlugin.loader, "css-loader", "postcss-loader","less-loader"]
},
...
],
},
plugins: [
...
new minicssExtractPlugin({ // 将样式抽离成独立的css文件
filename:"[name].css",
}),
...
],
...
}

图片/字体⽂件处理:

  • file-loader
  • url-loader

url-loaderfile-loader都可以⽤来处理本地的资源⽂件,如图⽚、字体、⾳视频等。功能也是类似的,不过url-loader可以指定在⽂件⼤⼩⼩于指定的限制时,返回DataURL,不会输出真实的⽂件,可以减少昂贵的⽹络请求。

1
2
#安装
npm install url-loader file-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
// 使用
import pic from 'you pic url'

const img = new Image()
img.src = pic

const root = document.getElementById('app')
root.append(img)

// webpack配置
{
test:/\.(png|jp?g|gif|webp)$/,
// use:"file-loader"
use:{
loader:'file-loader',
options:{
name:"images/[name].[ext]", // ext 为后缀占位符 使用原后缀输出
outputPath:'images',// 输出目录
publicPath:'../images' // 引用的目录自动带上publicPath路径
}
}

// use:"url-loader" url-loader兼容file-loader的配置
use:{
loader:'url-loader',
options:{
name:"images/[name].[ext]", // ext 为后缀占位符 使用原后缀输出
outputPath:'images',// 输出目录
publicPath:'../images', // 引用的目录自动带上publicPath路径
limit: 1024*10 // 单位是字节 1024为一个kb 大于limit值为png格式 小于limit值 转base64
}
}
}

file-loader更多相关
如果需要使⽤图⽚压缩功能,可以使⽤image-webpack-loader

字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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"
}

hash

  • hash策略

    在输出的文件名后添加[hash],可以用[hash:8]控制文件名中hash长度
    以项目为单位,项目内容改变,则会生产新的hash,内容不变hash不变

  • 使用chunkhash

    chunk为单位,当一个文件内容改变,则整个chunk组的模块hash都会改变
    [name]-[chunkhash:8].[ext]

  • contenthash

    以自身内容为单位

文章作者: Joker
文章链接: https://qytayh.github.io/2021/08/webpack%E8%BF%9B%E8%A1%8C%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Joker's Blog