webpack5.第三篇

2023-11-08 19:29:46

webpack

提取css成单独文件

先用以往的开发模式来打包。创建以下文件夹，build里的内容是打包后生成的。
webpack5.第三篇
index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>

</body>

</html>

index.js代码

import '../css/text1.css';
import '../css/text2.css'

webpack.config.js代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './js/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules:
            [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
    },
    plugins: [
        new HtmlwebpackPlugin(
            {
                template: './index.html'
            }
        )
    ]
}

text1.css代码

#box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

text2.css代码

#box2 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
}

随后打开终端输入：

npm init
npm i webpack_css
npm i webpack webpack-cli -D
npm i css-loader style-loader -D
npm i html-wenpack-plugin -D

在下载好相关包后，打开package.json，修改内部的scripts代码。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

然后终端输入：

npm run dev

最后打开build文件夹下生成的index.html查看效果
webpack5.第三篇
那么此时我们使用传统的手法打包成功了。打开生成的built.js发现，之前的css样式被写在了这里面，现在想提取出来，使成为单独的文件。
下载插件npm i mini-css-extract-plugin -D。
然后修改config内的代码。使用该插件

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    entry: './js/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules:
            [
                {
                    test: /\.css$/,
                    use:
                        [
                            // 创建style标签，将样式放入
                            // 'style-loader',所以想提取css成单独文件时，这里不能把css样式放入
                            // 使用下边的插件进行取代，提取js中的css成单独文件
                            MiniCssExtractPlugin.loader,
                            // 将css文件整合到js文件中
                            'css-loader'
                        ]
                }
            ]
    },
    plugins: [
        new HtmlwebpackPlugin(
            {
                template: './index.html'
            }
        ),
        new MiniCssExtractPlugin(
            {
                // 对输出的文件重命名
                filename: 'built.css'
            }
        )
    ]
}

那么此时，运行npm run dev,build文件夹下有一个built.css生成。同文件夹下的index.html引入样式的方法变为了通过link标签引入。最后在打开index.html查看效果
webpack5.第三篇

css的兼容性处理

将上一节代码全部复制过来，重命名。然后只修改config配置。css兼容性处理: postcss --> 需要插件postcss-loader 、postcss-preset-env。终端中输入下述命令下载。

npm i postcss-loader postcss-preset-env -D

webpack5.第三篇
config.js代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 设置node.js环境变量，使其默认是处于开发环境development，不是生产环境
process.env.NODE_ENV = 'development'
module.exports = {
    entry: './js/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules:
            [
                {
                    test: /\.css$/,
                    use:
                        [
                            // 创建style标签，将样式放入
                            // 'style-loader',所以想提取css成单独文件时，这里不能把css样式放入
                            // 使用下边的插件进行取代，提取js中的css成单独文件
                            MiniCssExtractPlugin.loader,
                            // 将css文件整合到js文件中
                            'css-loader',
                            //css兼容性处理: postcss --> 插件postcss-loader 、postcss-preset-env
                            //这些插件帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                            //使用loader的默认配置
                            //"postcss-loader',
                            //修改loader的配置
                            {
                                loader: 'postcss-loader',
                                options: {
                                    postcssOptions: {
                                        plugins: [require('postcss-preset-env')()]
                                    }
                                }
                            }
                        ]
                }
            ]
    },
    plugins: [
        new HtmlwebpackPlugin(
            {
                template: './index.html'
            }
        ),
        new MiniCssExtractPlugin(
            {
                // 对输出的文件重命名
                filename: 'built.css'
            }
        )
    ]
}

在pachage.json中修改browserslist配置。其中browserslist的development部分表示兼容最近一个版本的浏览器，production中表示兼容百分之99.8的浏览器，不要兼容已经停用的浏览器。

{
  "name": "webpack_css",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

修改text1.css的内容，增加新样式。

#box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 增加两个在特定浏览器有兼容性问题的样式 */
    display: flex;
    backface-visibility: hidden;
}

随后输入npm run dev。打开生成的build文件夹下的built.js，发现对刚刚新增加的两个样式做了兼容处理。
webpack5.第三篇

压缩css

复制上一节全部代码。在基础上进行修改。压缩css需要引入一个插件css-minimizer-webpack-plugin。终端输入命令npm i css-minimizer-webpack-plugin -D进行下载（这是webpack5中的插件）。随后修改config.js配置

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// 设置node.js环境变量，使其默认是处于开发环境development，不是生产环境
//压缩css的插件css-minimizer-webpack-plugin

process.env.NODE_ENV = 'development'
module.exports = {
    entry: './js/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules:
            [
                {
                    test: /\.css$/,
                    use:
                        [
                            // 创建style标签，将样式放入
                            // 'style-loader',所以想提取css成单独文件时，这里不能把css样式放入
                            // 使用下边的插件进行取代，提取js中的css成单独文件
                            MiniCssExtractPlugin.loader,
                            // 将css文件整合到js文件中
                            'css-loader',
                            //css兼容性处理: postcss --> 插件postcss-loader 、postcss-preset-env
                            //这些插件帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                            //使用loader的默认配置
                            //"postcss-loader',
                            //修改loader的配置
                            {
                                loader: 'postcss-loader',
                                options: {
                                    postcssOptions: {
                                        plugins: [require('postcss-preset-env')()]
                                    }
                                }
                            }
                        ]
                }
            ]
    },
    plugins: [
        new HtmlwebpackPlugin(
            {
                template: './index.html'
            }
        ),
        new MiniCssExtractPlugin(
            {
                // 对输出的文件重命名
                filename: 'built.css'
            }
        ),
        new CssMinimizerWebpackPlugin(
            {
                // 压缩css的插件
            }
        )
    ]
}

终端输入npm run dev。随后就可以查看build文件夹下的built.css文件的大小。

js语法检测

新建一个config.js文件用来写配置，以及入口文件index.js等等。
语法检测的意义：使代码的风格统一以及一些语法毛病的消除。需要下载一些包。eslint-webpack-plugin 、eslint。只检查自己写的源代码，第三方库不参与检查。设置的检查规则：在package.json中eslintConfig中设置，一个推荐的规则是airbnb，使用airbnb需要下载三个库，eslint-config-airbnb-base eslint eslint-plugin-import。
终端依次输入：

npm init
webpack_check
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
npm i eslint-webpack-plugin eslint eslint-config-airbnb-base eslint-plugin-import -D

然后在下载后的package.json中进行配置。

{
  "name": "webpack_check",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.5.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-webpack-plugin": "^3.1.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }
}

congfig.js内进行修改代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*语法检测的意义：使代码的风格统一以及一些语法毛病的消除。
            需要下载一些包。eslint-webpack-plugin 、eslint。只检查自己写的源代码，第三方库不参与检查。
            设置的检查规则：在package.json中eslintConfig中设置，一个推荐的规则是airbnb
            使用airbnb需要下载三个库。eslint-config-airbnb-base eslint eslint-plugin-import
            */
            // {    webpack4中的写法
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     options: {
            //         // 自动修复eslint的错误
            //         fix: true
            //     }
            // }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),
        new eslintwebpackplugin({
        //使用默认设置
        })
    ],
    mode: 'development'
}

index.js代码

function add(x, y) {
    return x + y;
}
console.log(add(2, 5));

index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>heool</h1>
</body>

</html>

最后写好的工程文件目录
webpack5.第三篇
随后输入npm run dev运行。
webpack5.第三篇

通过上图结果，我们可以看出检查的结果，首先问题文件为index.js，1：21表示第一行的第21个字符。那么自己一个个的修复很麻烦，所以在config.js中增加一个自动修复为true。

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            /*语法检测的意义：使代码的风格统一以及一些语法毛病的消除。
            需要下载一些包。eslint-webpack-plugin 、eslint。只检查自己写的源代码，第三方库不参与检查。
            设置的检查规则：在package.json中eslintConfig中设置，一个推荐的规则是airbnb
            使用airbnb需要下载三个库。eslint-config-airbnb-base eslint eslint-plugin-import
            */
            // {    webpack4中的写法
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     loader: 'eslint-loader',
            //     options: {
            //         // 自动修复eslint的错误
            //         fix: true
            //     }
            // }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),
        new eslintwebpackplugin({
            // 使用默认设置，把自动修复改为true
            fix: true
        })
    ],
    mode: 'development'
}

输入npm run dev重新运行，发现红色的错误消失了，只有黄色的警告了，这就可以正常运行了。
webpack5.第三篇

上一篇：webpack5简单配置less或css里图片的显示


下一篇：webpack5进阶-学习笔记