webpack 常用的第三方包

发表于 更新于
本文字数： 826 阅读时长 ≈ 1 分钟

自定义 webpack 作为构建工具

webpack 相关包

less 预编译: less, less-loader
提取 css: mini-css-extract-plugin
压缩 css: optimize-css-assets-webpack-plugin
css 兼容性处理: postcss, postcss-preset-env

js 兼容性处理: babel-loader, @babel/preset-env, @babel/core, corejs

样式中图片处理： url-loader
html 中图片处理: html-loader
其他文件处理： file-loader
html 模板打包: html-webpack-plugin

开发工具: webpack-dev-tool

开发框架：vue

编写 shell 文件帮助安装 —— init.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#!/bin/bash
echo "hello world"
# 开发环境
npm i -D webpack@4 webpack-cli@4 \
less less-loader@3 css-loader@2 style-loader@2 \
file-loader@3 url-loader@3 html-loader@1 \
html-webpack-plugin@3 webpack-dev-server@3

# 生产环境
npm i -D mini-css-extract-plugin \
postcss-loader postcss-preset-env \
optimize-css-assets-webpack-plugin \
babel-loader @babel/preset-env @babel/core corejs \

# 其他
# css 跨浏览器初始化
npm i normalize.css

# vue
npm i vue

应用场景包

消息订阅与发布

用于实现兄弟组件间通信

npm i pubsub-js

生成 id 包

前端单机项目生成 id

npm i nanoid