从0到1搭建webpack

好，上一篇文章我们说了一下在react中怎么弄这个webpack，那么现在在说一下不用react我们又该怎么配置，这些呢也都是我自己通弄过看视频自己总结的，拿来给大家分享一下。

前期准备条件

1、nvm（可以快速切换node版本）

下载地址：Releases · coreybutler/nvm-windows · GitHub

下载这两个nvm安装包其中一个即可。

解决下载速度慢的问题

nvm文件夹下的settings.txt文件，复制进去镜像代码

node_mirror：https://npm.taobao.org/mirrors/node/

npm_mirror:https://npm.taobao.org/mirrors/npm/

ps：webpack基于nodejs，nodejs又基于commonjs。

webpack基本配置

webpack创建命令：npx webpack init ./ --force --template=default

module：项目中每一个文件可以理解成chunk，打包后的文件叫module。

entry：一个页面对应一个入口，单页面只需要一个入口即可。

output：打包之后的代码路径。打包完成后代码放在哪里

devServer：开发环境配置。

mode：'production'，设置生产环境。

plugins：数组形式，存放插件。

mini-css-extract-plugin使用这个插件可以打包出css文件。用于生产环境。

css-loader把css文件变成webpack自己认识的js。

style-loader把js变成style标签插入到页面中，用于开发依赖。使用这个loader打包之后不出现css文件。

关于样式的loader从右向左读取。

配置css

配置css需要通过命令：npm i postcss-loader --save-dev、npm i autoprefixer --save-dev进行下载postcss-loader和autoprefixer

postcss-loader只是一个编译平台，并且需要下载autoprefixer插件，还需要在src统计创建文件postcss.config.js，代码如下：

//postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

webpack.config.js文件代码如下：

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

//核心
const config = {
    entry: "./src/index.js", //入口文件
    output: {
        //代码生成路径
        path: path.resolve(__dirname, "dist2"),
    },
    devServer: {
        //本地开发环境
        open: true,
        host: "localhost",
    },
    plugins: [
        //插件
        new HtmlWebpackPlugin({
            template: "index.html",
        }),
        new MiniCssExtractPlugin(),

        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    
    module: {
        //资源解析、编译
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: "asset",
            },
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader", //这是一个编译平台
                ],
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
    mode: "production", //设置生产环境

};

module.exports = () => {
    if (isProduction) {
        config.mode = "production";

        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
    } else {
        config.mode = "development";
    }
    return config;
};

我们可以利用postcss和autoprefixer自动给css样式添加前缀，使得css样式在各种浏览器都兼容。

之后再次通过npx webpack build打包得到打包之后的css文件如下：

/*!*******************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./index.css ***!
  \*******************************************************************************************************/
body{
    background: pink;
}

.app{
    display: flex;
    transition: all 1s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background: linear-gradient(to bottom,white,black);
}

那么如果你去使用css next怎么配置呢？只需要改postcss.config.js文件的代码即可：

//postcss-cssnext包含自动添加前缀功能

module.exports = {
    plugins: [
        // require('autoprefixer')
        require('postcss-cssnext')
    ]
}

当然了，记得安装npm i postcss-cssnext --save-dev

关于js部分的配置

Babel环境配置（js）

下载依赖：npm install --save-dev @babel/core @babel/cli @babel/preset-env

Webpack.config.js中设置规则：

        {
                test: /\.js$/i,
                use:{
                    loader: "babel-loader",
                    
                }
        }

为了能够编译jsx语法的代码，还需要进行babel预设

在src文件夹同级创建babel.config.js文件,

{
    "presets":[
       "@babel/preset-react"
    ]
}

同时下载依赖npm i --save-dev @babel/preset-react

ps：preset就是babel帮你准备好的可以直接使用的插件组合

html部分

首先安装插件：npm i --save-dev html-webpack-plugin

package.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin"); 
 plugins: [
 new HtmlWebpackPlugin({
            template: "index.html",
        }),
]

打包之后，html文件多了两个标签，一个script标签引入js，link引入css

Ps：webpack打包出来的script标签有defer

在 Webpack 打包过程中，defer 和 async 是两种用于加载 JavaScript 文件的属性，它们的用途和行为有所不同。以下是它们的详细说明和区别：

defer 推迟

• 用途 ：defer 属性用于告诉浏览器在文档解析完成后再执行脚本。
• 执行顺序 ：带有 defer 属性的脚本会按照它们在文档中的出现顺序依次执行。这意味着如果有多个带 defer 的脚本，它们会按照它们在 HTML 中的顺序执行。
• 适用场景：适合需要在 DOM 完全加载后执行的脚本，尤其是依赖于 DOM 元素的脚本。

async

• 用途 ：async 属性用于告诉浏览器立即下载脚本，但不等待文档解析完成就执行它。
• 执行顺序 ：带有 async 属性的脚本会在下载完成后立即执行，而不考虑它们在文档中的顺序。这意味着如果有多个带 async 的脚本，它们的执行顺序是不确定的，取决于下载的速度。
• 适用场景：适合独立的脚本，尤其是那些不依赖于其他脚本或 DOM 的脚本，比如分析工具或广告脚本。

总结

• 执行时机：

  • defer：等到文档解析完成后执行。
  • async：下载完成后立即执行，无需等待文档解析。

• 执行顺序：

  • defer：按照在文档中的顺序执行。
  • async：执行顺序不确定，取决于下载速度。

使用示例

<!-- 使用 defer -->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<!-- script1.js 和 script2.js 会按照顺序执行 -->

<!-- 使用 async -->
<script src="script1.js" async></script>
<script src="script2.js" async></script>
<!-- script1.js 和 script2.js 的执行顺序不确定 -->

在使用 Webpack 打包时，可以通过配置来指定这些属性，以优化应用的加载性能。

对于devServer的设置

package.config.js：

devServer: {
        //本地开发环境
        open: true,
        host: "localhost",
        static:{
            directory: path.join(__dirname, "public"),
        },
        compress: true, //开启压缩
        port: 9000,
    },

调试

开发的时候需要设置成开发模式

mode: "development", //设置开发环境