Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 1718f365 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 335a7cb3
隐藏空白更改
内联 并排
Showing with 575 addition and 19 deletion
blog/webpack/index.md
浏览文件 @ 1718f365
...@@ -886,4 +886,554 @@ module.exports = { ...@@ -886,4 +886,554 @@ module.exports = {
``` ```
https://www.bilibili.com/video/BV1e7411j7T5?p=9&spm_id_from=pageDriver ## 4、开发环境基本配置
\ No newline at end of file
### 4.1、devServer
开发服务器，自动化开发（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出
```bash
npm install webpack-dev-server --save-dev
```
webpack4配置
```js
module.exports = {
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'dist'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
}
```
webpack5配置
```js
module.exports = {{
// 开发服务器配置
devServer: {
// 从目录提供静态文件
static: {
directory: path.join(__dirname, "public"),
publicPath: "/",
},
// 启动后打开浏览器
open: true,
// 监听请求的端口号
port: 8080,
},
}
```
为了方便启动，可以配置启动命令
package.json
```json
{
"scripts": {
"dev": "webpack serve",
"build": "webpack"
},
}
```
启动开发服务器
```
npm run dev
```
### 4.2、webpack开发环境
1. 提升开发效率
2. 处理js、css、less、图片、字体文件
webpack.config.js 完整配置
```js
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// webpack配置
module.exports = {
// 入口文件
entry: "./src/index.js",
// 输出
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
// 自定义资源文件名
assetModuleFilename: "images/[hash:10][ext][query]",
},
// 开发服务器配置
devServer: {
// 从目录提供静态文件
static: {
directory: path.join(__dirname, "public"),
publicPath: "/",
},
// 启动后打开浏览器
open: true,
// 监听请求的端口号
port: 8080,
},
// loader配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// 处理less文件
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"],
},
// 处理资源文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
},
// 处理html文件，加载其中的图片
{
test: /\.html$/i,
loader: "html-loader",
},
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
// 插件配置
plugins: [
// 复制一份HTML文件，并自动引入打包资源（js/css）
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
// 模式
mode: "development",
// mode: 'production',
};
```
## 5、生产环境基本配置
目前存在的问题
1. css通过js动态生成，会出现闪屏现象
2. 代码没有压缩
3. 浏览器兼容性问题
### 5.1、提取css成单独的文件
```bash
npm i mini-css-extract-plugin -D
```
完整配置
```js
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// webpack配置
module.exports = {
// 入口文件
entry: "./src/index.js",
// 输出
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
// 自定义资源文件名
assetModuleFilename: "images/[hash:10][ext][query]",
// 在生成文件之前清空 output 目录
clean: true,
},
// 开发服务器配置
devServer: {
// 从目录提供静态文件
static: {
directory: path.join(__dirname, "public"),
publicPath: "/",
},
// 启动后打开浏览器
open: true,
// 监听请求的端口号
port: 8080,
},
// loader配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/i,
use: [
// 创建style标签，将样式放入style标签中
// "style-loader",
// 提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
"css-loader",
],
},
// 处理less文件
{
test: /\.less$/i,
use: [
// "style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
},
// 处理资源文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
},
// 处理html文件，加载其中的图片
{
test: /\.html$/i,
loader: "html-loader",
},
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
// 插件配置
plugins: [
// 复制一份HTML文件，并自动引入打包资源（js/css）
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
// 模式
mode: "development",
// mode: 'production',
};
```
### 5.2、css兼容性处理
```
npm i postcss postcss-loader postcss-preset-env -D
```
browserslist: [https://github.com/browserslist/browserslist](https://github.com/browserslist/browserslist)
通过 NODE_ENV 判断环境, 默认生产环境
package.json
```json
{
"browserslist": {
"development": [
"last 1 version"
],
"production": [
"last 1 version",
"> 1%",
"ie 10"
]
}
}
```
完整配置
```js
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// webpack配置
module.exports = {
// 入口文件
entry: "./src/index.js",
// 输出
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
// 自定义资源文件名
assetModuleFilename: "images/[hash:10][ext][query]",
// 在生成文件之前清空 output 目录
clean: true,
},
// 开发服务器配置
devServer: {
// 从目录提供静态文件
static: {
directory: path.join(__dirname, "public"),
publicPath: "/",
},
// 启动后打开浏览器
open: true,
// 监听请求的端口号
port: 8080,
},
// loader配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/i,
use: [
// 创建style标签，将样式放入style标签中
// "style-loader",
// 提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
// postcss-preset-env 帮助postcss找到package.json中`browserslist`里边的配置
"postcss-preset-env",
],
],
},
},
},
],
},
// 处理less文件
{
test: /\.less$/i,
use: [
// "style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
],
],
},
},
},
"less-loader",
],
},
// 处理资源文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
},
// 处理html文件，加载其中的图片
{
test: /\.html$/i,
loader: "html-loader",
},
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
// 插件配置
plugins: [
// 复制一份HTML文件，并自动引入打包资源（js/css）
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
// 模式
mode: "development",
// mode: 'production',
};
```
### 5.3、css压缩
webpack4使用 optimize-css-assets-webpack-plugin: [https://github.com/NMFR/optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)
webpack5使用 css-minimizer-webpack-plugin: [https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/](https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/)
```
npm install css-minimizer-webpack-plugin --save-dev
```
完整配置
```js
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// webpack配置
module.exports = {
// 入口文件
entry: "./src/index.js",
// 输出
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
// 自定义资源文件名
assetModuleFilename: "images/[hash:10][ext][query]",
// 在生成文件之前清空 output 目录
clean: true,
},
// 开发服务器配置
devServer: {
// 从目录提供静态文件
static: {
directory: path.join(__dirname, "public"),
publicPath: "/",
},
// 启动后打开浏览器
open: true,
// 监听请求的端口号
port: 8080,
},
// loader配置
module: {
rules: [
// 处理css文件
{
test: /\.css$/i,
use: [
// 创建style标签，将样式放入style标签中
// "style-loader",
// 提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["postcss-preset-env"]],
},
},
},
],
},
// 处理less文件
{
test: /\.less$/i,
use: [
// "style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["postcss-preset-env"]],
},
},
},
"less-loader",
],
},
// 处理资源文件
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
},
// 处理html文件，加载其中的图片
{
test: /\.html$/i,
loader: "html-loader",
},
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
// 插件配置
plugins: [
// 复制一份HTML文件，并自动引入打包资源（js/css）
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
optimization: {
// 开发环境下启用 CSS 优化
minimize: true,
minimizer: [
// 使用 cssnano 优化和压缩 CSS
new CssMinimizerPlugin(),
],
},
// 模式
mode: "development",
// mode: 'production',
};
```
https://www.bilibili.com/video/BV1e7411j7T5?p=15&spm_id_from=pageDriver
\ No newline at end of file
doc/javascript.md
浏览文件 @ 1718f365
# JavaScript # JavaScript
[W3School - JavaScript 教程](https://www.w3school.com.cn/js/index.asp)
2021-12-23 [Node.js：fs（file system）文件系统管理模块](https://pengshiyu.blog.csdn.net/article/details/122111586)
2021-12-23 [Pinia：Vue3.js 的状态管理器](https://pengshiyu.blog.csdn.net/article/details/122101558)
2021-12-23 [PubSubJS：用 JavaScript 编写的基于主题的发布/订阅库](https://pengshiyu.blog.csdn.net/article/details/122100104)
[http://www.json.org/](http://www.json.org/)
[https://jekyllthemes.io/](https://jekyllthemes.io/)
[ECMAScript 6 入门 Promise 对象](https://es6.ruanyifeng.com/#docs/promise)
[https://www.ecma-international.org/](https://www.ecma-international.org/)
[vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/) 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。
## 第三方库 ## 第三方库
[vue.js](https://cn.vuejs.org/v2/guide/) [vue.js](https://cn.vuejs.org/v2/guide/)
...@@ -81,6 +63,8 @@ ...@@ -81,6 +63,8 @@
[CKEditor](https://ckeditor.com/docs/index.html) Smart rich text editor components with collaborative editing. [CKEditor](https://ckeditor.com/docs/index.html) Smart rich text editor components with collaborative editing.
[wangEditor 5](https://www.wangeditor.com/): 开源 Web 富文本编辑器，开箱即用，配置简单
[ScrollReveal](https://scrollrevealjs.org/) [ScrollReveal](https://scrollrevealjs.org/)
[preactjs](https://preactjs.com/)Fast 3kB alternative to React with the same modern API. [preactjs](https://preactjs.com/)Fast 3kB alternative to React with the same modern API.
...@@ -110,3 +94,22 @@ https://npm.devtool.tech/ ...@@ -110,3 +94,22 @@ https://npm.devtool.tech/
## 文章 ## 文章
[能解决 90% 需求的 js 库](https://juejin.cn/post/7024011415144890405) [能解决 90% 需求的 js 库](https://juejin.cn/post/7024011415144890405)
[W3School - JavaScript 教程](https://www.w3school.com.cn/js/index.asp)
2021-12-23 [Node.js：fs（file system）文件系统管理模块](https://pengshiyu.blog.csdn.net/article/details/122111586)
2021-12-23 [Pinia：Vue3.js 的状态管理器](https://pengshiyu.blog.csdn.net/article/details/122101558)
2021-12-23 [PubSubJS：用 JavaScript 编写的基于主题的发布/订阅库](https://pengshiyu.blog.csdn.net/article/details/122100104)
[http://www.json.org/](http://www.json.org/)
[https://jekyllthemes.io/](https://jekyllthemes.io/)
[ECMAScript 6 入门 Promise 对象](https://es6.ruanyifeng.com/#docs/promise)
[https://www.ecma-international.org/](https://www.ecma-international.org/)
[vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/) 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。
doc/webpack.md
浏览文件 @ 1718f365
# webpack # webpack
中文文档：[https://webpack.docschina.org](https://webpack.docschina.org)
插件 | github | 描述 插件 | github | 描述
- |- | - - |- | -
webpack-manifest-plugin | [github](https://github.com/shellscape/webpack-manifest-plugin)| 将 manifest 数据提取为一个 json 文件以供使用 webpack-manifest-plugin | [github](https://github.com/shellscape/webpack-manifest-plugin)| 将 manifest 数据提取为一个 json 文件以供使用
html-webpack-plugin |[github](https://github.com/jantimon/html-webpack-plugin) | 生成HTML文件 html-webpack-plugin |[github](https://github.com/jantimon/html-webpack-plugin) | 生成HTML文件
mini-css-extract-plugin | [github](https://github.com/webpack-contrib/mini-css-extract-plugin)|用于将 CSS 从主应用程序中分离 mini-css-extract-plugin | [github](https://github.com/webpack-contrib/mini-css-extract-plugin)|用于将 CSS 从主应用程序中分离
webpack-bundle-analyzer | [github](https://github.com/webpack-contrib/webpack-bundle-analyzer) | 它将 bundle 内容展示为一个便捷的、交互式、可缩放的树状图形式。 webpack-bundle-analyzer | [github](https://github.com/webpack-contrib/webpack-bundle-analyzer) | 它将 bundle 内容展示为一个便捷的、交互式、可缩放的树状图形式。
webpack-dev-server | [github](https://github.com/webpack/webpack-dev-server) | 提供 live reloading 模式的开发服务器
polyfill Promises polyfill Promises
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或