从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.jsmodule.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", //设置开发环境