Node.js与webpack（三）

已于 2024-04-04 18:39:40 修改
阅读量1.1k 收藏 21
点赞数 26
文章标签： node.js webpack 前端
于 2024-03-17 13:46:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lklalmq/article/details/136581215
版权

上一节：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定义变量
    }
}
.eslintignore

# 忽略dist目录下所有文件
dist
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 压缩

不需要额外进行配置

下一篇： Node.js 与 webpack（四）-CSDN博客

Oneforlove_twoforjob
关注
  • 26
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue开发nodejs安装webpack , webpack-cli ,webpack-dev-server版本匹配选择问题
智轩软件的专栏
01-13 914
选择以下组合版本调试通过。
node_js+webpack
weixin_44697506的博客
03-06 802
二、path模块和__dirname 三、http模块创建Web服务 端口号用于标记服务器里不同功能的服务程序 四、CommonJS模块和ECMAScript模块实现模块化 CommonJS模块 导出：module.exports = {}导入：require(‘模块名或路径’)(导入node.js内置模块用模块名，导入自定义模块用路径)示例： ECMAScript模块默认导出 由于node.js默认支持CommonJS标准语法，因此使用ECMAScript时需要在运行模块所在文件夹新建package.j
科学修改node_modules中文件的三种方法
CHANCE_wqp的博客
03-10 1456
在实际项目开发过程中会用到很多第三方包，其中有一些错误或者需要做兼容处理的地方，这时就需要能够在我们的项目中修改特定文件，并把这些修改固定下来，不被install后还原会去。以下介绍三种方法。该方法需额外安装 patch-package，还需执行命令，生成补丁文件。就能在每次执行install命令时将补丁内容替换到node_modules中对应的源文件中。 2、修改项目根目录下的 package.json 文件 执行如下命令 执行该命令后会在项目根目录中自动创建一个 patches 文件夹，该文件夹中就会出
webpack4.0学习超详细 从0到1
qq_38935512的博客
01-13 1249
什么是webpack，模块打包机，功能就是通过入口将所有得依赖关系打包成静态资源。 功能： 1.实现代码得转换（es6转es5，css转换） 2.文件优化（压缩代码体积，合并文件等） 3.代码分割（公共模块得抽离，路由懒加载） 4.模块合并（功能分类合并模块） 5.自动刷新（热更新） 6.代码校验 7.打包后自动发布 1.Webpack 安装（找一个空文件夹） 1、npm init -y（也可以不加y）后面添加 -y参数，帮助我们自动进行确认，直接生成项目 2、npm install webpack@
搭建vue项目安装node镜像 webpack 出现版本不兼容最好的颁发
weixin_35755434的博客
02-15 692
如果在搭建 Vue 项目时，安装 Node 镜像和 webpack 出现版本不兼容的问题，最好的解决方法是更新 webpack 版本或者降低 Node 版本。 具体来说，如果 webpack 版本过低，可以升级到最新版本；如果 Node 版本过高，可以降低到 webpack 支持的版本范围内。 为了避免出现版本兼容性问题，建议在搭建 Vue 项目前，先了解相关的技术栈版本要求，并确保所选的版本是兼...
Web前端模块化开发教程（ES6+Node.js+Webpack）_源代码.zip
06-29
5. **Webpack配置**：Webpack的配置文件（webpack.config.js）定义了如何处理项目中的各种模块。它包括入口(entry)、输出(output)、模块规则(module rules)、插件(plugins)等配置。例如，入口文件指定了应用的起点，...
Node.js 和 webpack 下载安装——小白教程
01-20
前端学习Vue会用到webpack，用webpack需要安装node.js，由此展开本篇教程，过程中遇到了一些麻烦，解决方案也已经给出 Node.js下载地址 点击跳转 1，下载安装node.js 推荐百度云离线下载，chrome和迅雷我这边都很慢...
Node.js-webpack4ejsexpress多页应用项目架构模板
08-10
**Node.js webpack4 ejs express 多页应用项目架构模板** 在现代Web开发中，构建一个功能丰富的多页面应用程序（Multi-Page Application, MPAs）是常见的需求。本项目架构模板利用了Node.js、webpack4、ejs模板引擎...
Node.js-webpack-serve一个精简现代灵活的webpack开发服务器
08-10
webpack-serve 一个精简，现代，灵活的webpack开发服务器
react-node-webpack:使用React，Node.js和Webpack构建的示例应用程序| http
04-29
React-Node-Webpack 入门 确保您已经安装了 设置 克隆存储库，然后在项目根目录下运行以下命令： npm install 安装./package.json列出的node.js组件 生成并运行该项目以进行本地开发： npm run build 构建React...
webpack3最新版本配置研究（一）loader
机智的皮卡丘的博客
07-03 5625
webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的，本文使用的时webpack2，使用的新配置，有很多旧的配置可能会出现报错，webpack3刚出希望变化不要太大！什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将
Webpack4.x与babel7.x的配置
ganlubaba666的博客
02-23 2119
前言 昨天在学babel的配置的时候失败了，然后上网查了一下，是由于6.x版本和7.x版本的兼容问题。 因为我是装了好几遍都失败了，然后我就把node_modules删掉，直接重装了。 版本差异 6.x版本和7.x版本有一些不同 6.x版本都是babel-xx，但是7.x版本大都是@babel-xx stage-x插件在7.x中被废弃了 步骤 下载babel-loader，注意，这个前面是没...
如何安装nodejs、webpack
qq_42449963的博客
09-27 1万+
前言： 我在b站上面学习Vue的时候需要使用webpack进行模块化，那就安装webpack，老师说由于webpack需要nodejs的支持，所以我们还需安装nodejs，所以我就先安装nodejs，然后在安装webpack 第一步：安装nodejs 下载： 老师上面nodejs的版本是10.13.0，所以我也安装该版本，在nodejs官网上面是最新的12.8.4，这不符合我的要求，于是我找到了所有nodejs历史版本的链接（https://nodejs.org/dist/），由于我本次使用的nodejs版
使用webpack打包nodejs 后台端环境|NodeJs 打包后台代码
天马3798
10-30 5516
一、使用webpack打包nodejs 后台端环境 第一步、安装webpack包，初始化项目应用 npm install webpack webpack-cli --save-dev 第二步、修改编译配置 1.增加webpack.config.js文件，配置输入输出，重点制定target 运行环境为node const path = require('path'); module.exports = { entry: './src/main.js', output: { fi
nodejs服务webpack打包以及线上部署
面向未来的历史
12-13 2万+
背景： 使用webpack打包nodejs服务，并部署到线上。 webpack 打包 自己的项目中是可以不用这个，因为都是使用nodejs开发。 const path = require("path") const fs = require("fs"); const nodeModules = {}; fs.readdirSync("node_modules&
webpack打包nodejs
阿祥_CSDN
07-30 1199
本文将简单介绍如何使用`webpack`编译构建`nodejs`项目。
小白webpack进行nodejs 前端打包配置
热门推荐
fengsh998的专栏
08-03 2万+
写这篇文章的起因是，最近在github上弄了个HA源码，毫无头绪，也没有说明环境要怎么搭，好了，自己摆弄吧，我看到有py文件，第一感觉就是最有可能是py搭建的项目，正好我有pycharm环境，就用pycharm打开，打开后，要想跑，那当然是要配run/debug configuration了，老实讲，不在行，于是乱配一通一开始以为是Djingo,好，搞了个Djingo.。。。。结果提示这没有dji...
伐木工 (100%用例)D卷 (Java&&Python&&C++&&Node.js&&C语言)
荆赫同艺的博客
08-07 246
一根 4米长的树木，伐木工不需要切割为 2*2，省去切割成本，直接整根树木交易，为 4*1，收益最大为 4。方式二: 3,2,2,3，但方式二，伐木工多切割一次，增加了切割成本却卖了一样的价格，因此并不是最优收益。一根 2 米长的树木，伐木工不切割，为2*1，收益最大为 2。一根5 米长的树木，伐木工切割为 2*3,收益最大为 6。输出最优收益时的各个树木长度，以空格分隔，按升序排列。一根 10 米长的树木，伐木工可以切割。方式一:3,4,4，也可以切割为。
nvm 切换、安装 Node.js 版本
最新发布
afufufufu的博客
08-07 240
nvm install vXX // 安装对应vXX版本的node。nvm uninstall vXX // 卸载对应vXX版本的node。nvm ls // 查看已安装node版本。nvm use xxx // 选择使用XXX版本。配置环境变量（我的是window11）双击，一直无脑下一步，即可安装成功。配置好后，点确定一层一层关闭。打开任务栏设置–搜环境变量。往下拉找到Assets。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值