Node.js与webpack（三）

上一节：Node.js与Webpack笔记（二）-CSDN博客

从0来一遍（webpack项目）

将之前的webpack 的纯开发配置，重新创建空白项目，重新做一遍，捋一遍思路防止加入生产模式时候弄混

1.创建文件夹，VSCode打开文件夹

2.cmd -> npm init -y

3.根据需求安装一堆依赖

"devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.10.0",
    "eslint": "^8.57.0",
    "eslint-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^5.6.0",
    "less-loader": "^12.2.0",
    "sass-loader": "^14.1.1",
    "style-loader": "^3.3.4",
    "stylus-loader": "^8.1.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  }
使用webpack5：
npm i webpack webpack-cli -D

处理css|less|sass|scss|stylus资源：
npm i style-loader css-loader less-style sass-loader stylus-loader -D

处理图片资源：

无，不需要依赖

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

处理图形文字、音视频资源：

无，不需要依赖

Eslint检查JS、VUE、JSX语法格式：
npm i eslint eslint-webpack-plugin --save-dev

Babel处理兼容问题：
npm install -D babel-loader @babel/core @babel/preset-env

处理HTML资源：

以原HTML的结构自动创建HTML，自动引入所有的出口js文件还有CSS等

npm i html-webpack-plugin -D

webpack提供的小型服务器：
npm i webpack-dev-server -D

4.手动创建这些文件夹（暂时手动）

5.写(粘贴)几个配置文件
webpack.config.js

配置文件内容：

1.修改打包入口和出口路径

2.打包自动清空资源

3.处理css、less、sass、scss、stylus样式资源

4.处理文字图标、音视频资源

5.处理图片资源

6.Babel：处理JS文件（还需要单独配置文件）

7.Eslint：检查js语法格式（还需要单独配置文件）

// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: 'src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "dist"),
        // 出口文件名，dist下的
        filename: "js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                use: ['style-loader', 'css-loader'],
            },
            // 处理less资源
            {
                test: /\.less$/,
                use: ['style-loader', "css-loader", "less-loader"],
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'public/index.html'),
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    devServer: {
        host: 'localhost', // 启动服务器域名
        port: "3030", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // 模式
    mode: "development", // 选择开发模式
}
手动创建配置文件需要的文件 
  • 入口文件.js
  • HTML模板插件需要的模板HTML

.eslintrc.js

此时eslint其实已经可以用了，每次打包编译时候才开是检测一次代码格式，如果需要实时检测，后面会使用VSCode插件

module.exports ={
    // 继承Eslint官方写好的 规则，还是比较主流的
    extends: ["eslint:recommended"], // 这里不能加任何空格
    env: {
        node: true, // 启用node中的全局变量（五大核心那些东西）
        browser: true, // 启用浏览器中全员变量 (window，console那些东西)
    },
    parserOptions: {
        ecmaVersion: 6, // ES语法版本，支持ES6
        sourceType: "module", // ES 模块化
    },
    rules: {
        "no-var": 2, //不能使用var定义变量
    }
}
babel.config.js

此时，webpack有了babel插件的帮助，已经可以处理ES6语法了，类似于将箭头函数转换成function(){};

module.exports = {
    // @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
    // @babel/preset-react：一个用来编译 React jsx 语法的预设
    // @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
    presets: ["@babel/preset-env"],
}
6.加一个插件
VSCode-ESLint

这个插件可以实时检测代码格式，就不用编译的时候才去报错了

再给插件写一个配置文件

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们开发时候只需要检查 src 下面自己写的源代码，不需要检查 dist 下面的文件。

eslintignore有可能不生效，有一个办法是在.eslintrc.js中写上：

网上也有其他办法，但是暂时也不会用

VSCode ESLint 插件 .eslintignore 文件不生效原因[转] – 后除 (mazey.net)

7.使用git
初始化仓库

创建.gitignore文件
# 忽略 npm下载的第三方包
node_modules
# 忽略分发文件夹
dist
# 忽略VSCode配置文件
.vscode
# 忽略秘钥文件
*.pem
*cer
# 忽略日志文件
*.log
# 忽略.history历史文件夹（可能是一个插件生成的）
.history

生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度
  • 之前的目录结构

  • 现在的目录

配置文件

  • webpack.dev.js

// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径，从项目根目录为起点，这里必须加上 ./
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        path: undefined, // 开发模式不输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        // clean: true, // 开发模式没有输出，不清空
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                use: ['style-loader', 'css-loader'],
            },
            // 处理less资源
            {
                test: /\.less$/,
                use: ['style-loader', "css-loader", "less-loader"],
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    devServer: {
        host: 'localhost', // 启动服务器域名
        port: "3030", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // 模式
    mode: "development", // 选择开发模式
}

 运行指令

npx webpack serve --config config/webpack.dev.js

 

  • webpack.prod.js

// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                use: ['style-loader', 'css-loader'],
            },
            // 处理less资源
            {
                test: /\.less$/,
                use: ['style-loader', "css-loader", "less-loader"],
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"],
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    // devServer: {
    //     host: 'localhost', // 启动服务器域名
    //     port: "3030", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },
    // 模式
    mode: "production", // 选择开发模式
}

 运行指令

npx webpack serve --config config/webpack.prod.js

 

报错的点

在entry处，必须加上 ./，在我的印象里，./src 和 src没区别啊，但是这里必须加上 ./

eslint配置文件中，继承官方规则这里，不能加任何空格，比如【eslint: recommended】

配置快速运行指令

在script中:

"start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"

npm start = npm run dev = npx webpack serve

以后启动指令：

  • 开发模式：npm start 或 npm run dev
  • 生产模式：npm run build

CSS处理（还需要额外依赖）

1.提取成独立的css文件
安装依赖
npm i mini-css-extract-plugin -D

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

  • webpack.prod.js
// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            // 处理less资源
            {
                test: /\.less$/,
                // use: ['style-loader', "css-loader", "less-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                // use: ["style-loader", "css-loader", "sass-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                // use: ["style-loader", "css-loader", "stylus-loader"],
                use: [MiniCssExtractPlugin.loader, 'css-loader','stylus-loader'],
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    // devServer: {
    //     host: 'localhost', // 启动服务器域名
    //     port: "3030", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },
    // 模式
    mode: "production", // 选择开发模式
}

运行命令
npm run build
2.CSS兼容性处理
安装依赖
npm i postcss-loader postcss postcss-preset-env -D
  • webpack.prod.js

// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, 
                    {
                        loader: "postcss-loader",
                        options: {
                          postcssOptions: {
                            plugins: [
                              "postcss-preset-env", // 能解决大多数样式兼容性问题
                            ],
                          },
                        },
                      },
                    'css-loader'],
            },
            // 处理less资源
            {
                test: /\.less$/,
                // use: ['style-loader', "css-loader", "less-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader", 
                {
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                      },
                    },
                  },
                "less-loader"],
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                // use: ["style-loader", "css-loader", "sass-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader", 
                {
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                      },
                    },
                  },
                "sass-loader"],
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                // use: ["style-loader", "css-loader", "stylus-loader"],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 
                {
                    loader: "postcss-loader",
                    options: {
                      postcssOptions: {
                        plugins: [
                          "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                      },
                    },
                  },
                'stylus-loader'],
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    // devServer: {
    //     host: 'localhost', // 启动服务器域名
    //     port: "3030", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },
    // 模式
    mode: "production", // 选择开发模式
}
 控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

  • package.json

"last 2 version"：无论什么浏览器只支持最近的两个版本

"> 1%"：支持99%的浏览器

"not dead"：有的浏览器发展的过程中死了（我也不懂什么是死了，可能是不维护了），就不支持了

"browserslist": ["last 2 version", "> 1%", "not dead"]

想要知道更多的 browserslist 配置，查看browserslist官网GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

运行命令
npm run build
合并配置（简便写法） 

// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
          },
        },
      },
      preProcessor,
    ].filter(Boolean);
  };

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                // use: ['style-loader', 'css-loader'],
                // use: [MiniCssExtractPlugin.loader, 
                //     {
                //         loader: "postcss-loader",
                //         options: {
                //           postcssOptions: {
                //             plugins: [
                //               "postcss-preset-env", // 能解决大多数样式兼容性问题
                //             ],
                //           },
                //         },
                //       },
                //     'css-loader'],
                use: getStyleLoaders(),
            },
            // 处理less资源
            {
                test: /\.less$/,
                // use: ['style-loader', "css-loader", "less-loader"],
                // use: [MiniCssExtractPlugin.loader, "css-loader", 
                // {
                //     loader: "postcss-loader",
                //     options: {
                //       postcssOptions: {
                //         plugins: [
                //           "postcss-preset-env", // 能解决大多数样式兼容性问题
                //         ],
                //       },
                //     },
                //   },
                // "less-loader"],
                use: getStyleLoaders("less-loader"),
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                // use: ["style-loader", "css-loader", "sass-loader"],
                // use: [MiniCssExtractPlugin.loader, "css-loader", 
                // {
                //     loader: "postcss-loader",
                //     options: {
                //       postcssOptions: {
                //         plugins: [
                //           "postcss-preset-env", // 能解决大多数样式兼容性问题
                //         ],
                //       },
                //     },
                //   },
                // "sass-loader"],
                use: getStyleLoaders("sass-loader"),
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                // use: ["style-loader", "css-loader", "stylus-loader"],
                // use: [MiniCssExtractPlugin.loader, 'css-loader', 
                // {
                //    loader: "postcss-loader",
                //    options: {
                //      postcssOptions: {
                //        plugins: [
                //          "postcss-preset-env", // 能解决大多数样式兼容性问题
                //        ],
                //      },
                //    },
                //  },
                // 'stylus-loader'],
                use: getStyleLoaders("stylus-loader"),
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    // devServer: {
    //     host: 'localhost', // 启动服务器域名
    //     port: "3030", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },
    // 模式
    mode: "production", // 选择开发模式
}
运行命令
npm run build
3.CSS压缩
安装依赖
npm i css-minimizer-webpack-plugin -D

  • webpack.prod.js
// node.js核心模块path，专门处理路径
const path = require('path');

// 处理HTML文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Eslint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// 处理CSS从默认style标签 到 link标签
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// CSS压缩
const CssMinizerPlugin = require('css-minimizer-webpack-plugin');


// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
    return [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-preset-env", // 能解决大多数样式兼容性问题
            ],
          },
        },
      },
      preProcessor,
    ].filter(Boolean);
  };

// webpack默认支持的是CommonJS语法
module.exports = {
    // 入口，相对路径
    entry: './src/main.js',
    // 输出
    output: {
        // __dirname获取当前项目根目录的绝对路径
        // dist 为输出目录，自动创建
        path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
        // 出口文件名，dist下的
        filename: "static/js/main.js",
        // 打包时自动清空上次打包资源
        clean: true,
    },
    // loader加载器
    module: {
        // 写正则作为匹配规则
        rules: [
            // 处理css资源
            {
                // 正则匹配一个 以 .css结尾的文件
                test: /\.css$/,
                // loader在数组中的执行顺序是从右到左
                // style-loader将js中的css通过创建style标签的形式添加到html文件中生效
                // css-loader将css资源编译成commonJS的模板到js中
                // use: ['style-loader', 'css-loader'],
                // use: [MiniCssExtractPlugin.loader, 
                //     {
                //         loader: "postcss-loader",
                //         options: {
                //           postcssOptions: {
                //             plugins: [
                //               "postcss-preset-env", // 能解决大多数样式兼容性问题
                //             ],
                //           },
                //         },
                //       },
                //     'css-loader'],
                use: getStyleLoaders(),
            },
            // 处理less资源
            {
                test: /\.less$/,
                // use: ['style-loader', "css-loader", "less-loader"],
                // use: [MiniCssExtractPlugin.loader, "css-loader", 
                // {
                //     loader: "postcss-loader",
                //     options: {
                //       postcssOptions: {
                //         plugins: [
                //           "postcss-preset-env", // 能解决大多数样式兼容性问题
                //         ],
                //       },
                //     },
                //   },
                // "less-loader"],
                use: getStyleLoaders("less-loader"),
            },
            // 处理sass 和 scss资源
            {
                test: /\.s[ac]ss$/,
                // use: ["style-loader", "css-loader", "sass-loader"],
                // use: [MiniCssExtractPlugin.loader, "css-loader", 
                // {
                //     loader: "postcss-loader",
                //     options: {
                //       postcssOptions: {
                //         plugins: [
                //           "postcss-preset-env", // 能解决大多数样式兼容性问题
                //         ],
                //       },
                //     },
                //   },
                // "sass-loader"],
                use: getStyleLoaders("sass-loader"),
            },
            // 处理stylus资源
            {
                test: /\.styl$/,
                // use: ["style-loader", "css-loader", "stylus-loader"],
                // use: [MiniCssExtractPlugin.loader, 'css-loader', 
                // {
                //    loader: "postcss-loader",
                //    options: {
                //      postcssOptions: {
                //        plugins: [
                //          "postcss-preset-env", // 能解决大多数样式兼容性问题
                //        ],
                //      },
                //    },
                //  },
                // 'stylus-loader'],
                use: getStyleLoaders("stylus-loader"),
            },
            // 处理媒体图片资源
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                // asset提供dataUrl来处理小图片转base64编码
                type: "asset",
                parser: {
                    // 小于 10k的图片，进行转字符串处理
                    // 体积略大一点，换来的是减少一次资源请求
                    dataUrlCondition: {
                        maxSize: 10 * 1024, 
                    },
                    // 修改图片资源输出路径, dist下的
                    // hash: 8，命名只取生成的hash值的前8位
                    // ext: 后缀名
                    // query: 请求头查询字符串（可选）
                    generator: {
                        filename: 'static/img/[hash: 8][ext][query]',
                    },
                }
            },
            // 处理字体图标文件，以及音视频文件
            {
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                type: "asset/resource",// 为什么是这个类型我也不知道，官网上写的
                // 修改媒体资源输出路径，dist下的
                generator: {
                    filename: 'static/media/[hash: 8][ext][query]',
                },
            },
            // 处理JS文件，JS解析器：Babel
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除第三方js文件
                loader: 'babel-loader',
            },
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // context指定需要检查的文件根目录，一般只检查src下的文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 以public/index.html为模板创建文件
            // 新html文件，内容结构与源文件一致，自动引入打包生成的js等资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
        // 提取css成单独文件
        new MiniCssExtractPlugin({
            // 定义输出文件名和目录
            filename: "static/css/main.css",
        }),
        // CSS压缩
        new CssMinizerPlugin(),
    ],
    // 开发服务器配置, webpack官方提供的小型服务器
    // devServer: {
    //     host: 'localhost', // 启动服务器域名
    //     port: "3030", // 启动服务器端口号
    //     open: true, // 是否自动打开浏览器
    // },
    // 模式
    mode: "production", // 选择开发模式
}

HTML 与 js压缩

默认生产模式已经开启了：html 压缩和 js 压缩

不需要额外进行配置

下一篇： 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/464007.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SVM-支持向量机实验分析(软硬间隔，线性核，高斯核)

SVM-支持向量机实验分析(软硬间隔，线性核，高斯核)

目录 一、前言 二、实验 0. 导入包 1. 支持向量机带来的效果 2. 软硬间隔 3. 非线性支持向量机 4. 核函数变换 线性核 高斯核 对比不同的gamma值对结果的影响 一、前言 学习本文之前要具有SVM支持向量机的理论知识，可以参考支持向量机（Support Vector …
阅读更多...
epoll怎么就高效了？

epoll怎么就高效了？

目录 摘要 1 举个栗子 2 从 epoll_create 开始 3 epoll_ctl，插入待监听的描述符 3.1 故事围绕 ep_item 展开 3.2 在 socket 等待队列上设置 epoll 回调 3.3 关系变得复杂 4 epoll_wait 等你 4.1 等待就绪事件 4.2 共享内存？ 5 来了来了&#xf…
阅读更多...
第 126 场 LeetCode 双周赛题解

第 126 场 LeetCode 双周赛题解

A 求出加密整数的和 模拟 class Solution { public:int sumOfEncryptedInt(vector<int> &nums) {int res 0;for (auto x: nums) {string s to_string(x);char ch *max_element(s.begin(), s.end());for (auto &c: s)c ch;res stoi(s);}return res;} };B 执行…
阅读更多...
Java学习笔记（15）

Java学习笔记（15）

JDK7前时间相关类 Date时间类 Simpledateformat Format 格式化 Parse 解析 默认格式 指定格式 EE&#xff1a;表示周几 Parse&#xff1a;把字符串时间转成date对象 注意&#xff1a;创建对象的格式要和字符串的格式一样 Calendar日历类 不能创建对象 Getinstance 获取当…
阅读更多...
8款手机宝藏APP,每款都非常强大实用！

8款手机宝藏APP,每款都非常强大实用！

1. 综合AI工具箱——HuluAI 综合AI工具https://h5.cxyhub.com/?invitationhmeEo7 HuluAI是一款聚合式全能AI工具&#xff0c;完美接入官方正版GPT4.0和Midjourney绘画&#xff01;。除此之外&#xff0c;还拥有文心一言语言大模型和DallE3绘图功能。经过长时间的稳定运行&am…
阅读更多...
【数据结构】深入理解AVL树：实现和应用

【数据结构】深入理解AVL树：实现和应用

AVL树是一种自平衡的二叉搜索树&#xff0c;它能够保持良好的平衡性质&#xff0c;使得在最坏情况下的时间复杂度也能保持在对数级别。本文将深入介绍AVL树的原理、实现和应用&#xff0c;并通过示例代码演示其基本操作。 文章目录 什么是AVL树&#xff1f;AVL树的实现在AVL树…
阅读更多...
Linux - 安装 Jenkins(详细教程)

Linux - 安装 Jenkins(详细教程)

目录 前言一、简介二、安装前准备三、下载与安装四、配置镜像地址五、启动与关闭六、常用插件的安装 前言 虽然说网上有很多关于 Jenkins 安装的教程&#xff0c;但是大部分都不够详细&#xff0c;或者是需要搭配 docker 或者 k8s 等进行安装&#xff0c;对于新手小白而已&…
阅读更多...
2024人工智能四大趋势→

2024人工智能四大趋势→

2023年&#xff0c;世人见证了ChatGPT在全球范围的大火。以生成式人工智能为代表的新一代人工智能问世&#xff0c;改变了人工智能&#xff08;AI&#xff09;技术与应用的发展轨迹&#xff0c;加速了人与AI的互动进程&#xff0c;是人工智能发展史上的新里程碑。2024年&#x…
阅读更多...
职场中的“跨界思维”：如何拓宽你的职业发展道路？

职场中的“跨界思维”：如何拓宽你的职业发展道路？

在当今职场&#xff0c;单一技能的竞争已经越来越激烈&#xff0c;具备跨界思维的人才越来越受到企业的青睐。本文将探讨职场中的“跨界思维”&#xff0c;帮助您拓宽职业发展道路&#xff0c;提升自身竞争力。 一、什么是跨界思维&#xff1f; 跨界思维&#xff0c;顾名思义&a…
阅读更多...
【重新定义matlab强大系列十八】Matlab深度学习长短期记忆 (LSTM) 网络生成文本

【重新定义matlab强大系列十八】Matlab深度学习长短期记忆 (LSTM) 网络生成文本

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 #### 防伪水印——左手の明天 #### &#x1f497; 大家好&#x1f917;&#x1f91…
阅读更多...
Etcd 介绍与使用（入门篇）

Etcd 介绍与使用（入门篇）

etcd 介绍 etcd 简介 etc &#xff08;基于 Go 语言实现&#xff0c;&#xff09;在 Linux 系统中是配置文件目录名&#xff1b;etcd 就是配置服务&#xff1b; etcd 诞生于 CoreOS 公司&#xff0c;最初用于解决集群管理系统中 os 升级时的分布式并发控制、配置文件的存储与分…
阅读更多...
Bean的作用域、Bean的自动装配、注解自动装配 （Spring学习笔记五）

Bean的作用域、Bean的自动装配、注解自动装配 （Spring学习笔记五）

1、Bean 的作用域 官网上显示有六种 1、Bean的作用域默认的是singleton&#xff08;单例模式的实现&#xff09; 也可以显示的设置&#xff08;单例模式的实现&#xff09; <!--用scope可以设置Bean的作用域--><bean id"user2" class"com.li.pojo.Us…
阅读更多...
Elasticsearch从入门到精通-05ES匹配查询

Elasticsearch从入门到精通-05ES匹配查询

Elasticsearch从入门到精通-05ES匹配查询 &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是程序员行走的鱼 &#x1f4d6; 本篇主要介绍和大家一块学习一下ES各种场景下的匹配查询,有助于我们在项目中进行综合使用 前提 创建索引并指定ik分词器: PUT /es_db {"…
阅读更多...
[ Linux ] vim的使用（附：命令模式的常见命令列表）

[ Linux ] vim的使用（附：命令模式的常见命令列表）

1.下载安装 这里是在通过yum进行下载安装 yum install -y vim 2.了解 vim是一款编辑器&#xff0c;它具有多模式的特点 主要有&#xff1a;插入模式&#xff0c;命令模式&#xff0c;底行模式 3.使用 打开 vim 文件名 命令模式的常见命令列表 插入模式 按「 i 」切换…
阅读更多...
建设IAM/IDM统一身份管理,实现系统之间的单点登录（SSO）

建设IAM/IDM统一身份管理,实现系统之间的单点登录（SSO）

企业实施身份管理的现状&#xff1a; 1.身份存储分散&#xff0c;不能统一供应诸多应用系统&#xff0c;企业用户信息常常存在于多个系统&#xff0c;如HR系统有一套用户信息&#xff0c;OA系统也有一套用户信息&#xff0c;身份存储不集中&#xff0c;不能统一地为诸多应用系…
阅读更多...
BUUCTF-WEB1

BUUCTF-WEB1

[ACTF2020 新生赛]Exec1 1.打开靶机 是一个ping命令 2.利用管道符“|” ping一下本地主机并查看ls ping 127.0.0.1 | ls 可以看到回显的内容是一个文件 127.0.0.1 | cat index.php #查看主机下index.php 127.0.0.1 | ls / #查看主机根目录下的文件 看的一个flag文件 …
阅读更多...
C++：菱形继承与虚继承

C++：菱形继承与虚继承

看下面这个示例代码 class A{ public: int num10; A(){cout<<"A构造"<<endl;} virtual void fun(){cout<<"A虚函数"<<endl;} };class B:public A{ public: B(){cout<<"B构造"<<endl;} void fun(){cout<…
阅读更多...
Linux基本使用

Linux基本使用

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;热门专栏&#xff1a;网络原理&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 Linux是什么&#xff1f; Linux常用命令介绍 命令提示…
阅读更多...
云服务器容器常用操作系统介绍

云服务器容器常用操作系统介绍

常用操作系统介绍 开源软件国内镜像源Alpine操作系统介绍镜像源修改镜像源apk包管理器 Debian操作系统介绍镜像源修改镜像源apt包管理器 ubuntu操作系统介绍修改镜像源apt包管理器 CentOS操作系统介绍修改镜像源yum包管理器 开源软件国内镜像源 名称地址南京大学mirror.nju.ed…
阅读更多...
【安全类书籍-2】Web渗透测试：使用Kali Linux

【安全类书籍-2】Web渗透测试：使用Kali Linux

目录 内容简介 作用 下载地址 内容简介 书籍的主要内容是指导读者如何运用Kali Linux这一专业的渗透测试平台对Web应用程序进行全面的安全测试。作者们从攻击者的视角出发，详细阐述了渗透测试的基本概念和技术，以及如何配置Kali Linux以适应渗透测试需求。书中不仅教授读者…
阅读更多...
最新文章

Copyright @ 2022~2023