🍹 👨🏽‍🍳 🧀 Webpack设置基础 🧑🏾‍🤝‍🧑🏻 🖋️ 👨‍🌾

首先，我们将安装webpack，这是使用以下命令完成的：

yarn add webpack webpack-cli -D如果您正在使用yarn软件包管理器

npm i webpack webpack-cli --save-dev，则对于npm软件包管理器，

Webpack是使用配置文件进行配置的 webpack.config.js，该文件存储在项目的根目录中。

配置文件的示例：

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

初始配置如下：

手表-做的WebPack手表中的文件和重建的变化;
entry-指示项目的入口点，以及从何处开始构建内部项目依赖关系图；
输出-指定创建的文件所在的路径以及命名方式；

您还需要安装webpack-dev-server，以开发和调试应用程序。

yarn add webpack-dev-server对于包管理器yarn或

npm i webpack-dev-server如果使用npm

要配置webpack-dev-server，请在我们的配置文件中添加devServer。

webpack-dev-server的参数：

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

我们还需要在package.json文件中添加/替换项目启动脚本：

"start": "webpack-dev-server --mode development",

和用于构建构建的脚本：

"build": "webpack --mode production"

引导程序

加载程序是特殊的模块，用于“加载”其他模块。它们还允许您在导入或“加载”文件时对其进行预处理。

加载程序可以将TypeScript等文件转换为JavaScript，将sass等文件转换为CSS。它们甚至可以使我们进行诸如将CSS和HTML文件直接导入我们的JavaScript模块之类的事情。要使用它们，您需要在配置文件的module.rules部分中注册必要的加载程序。

加载程序示例：

babel- loader-使用babel加载ES2015文件。
文件加载器-用于将各种文件（图像，音乐曲目等）加载到输出目录中
样式加载器-用于加载样式
css-loader-允许加载样式文件
@ svgr / webpack-允许您将svg图像用作jsx元素的加载器

要使用babel-loader，您需要安装巴别塔/核心。同时安装预设巴别塔/ preset-env，通过自动检测Babel所需的插件和多文件将ES2015 +编译为ES5。接下来，创建一个.babelrc文件，并将先前安装的预设添加到该文件。

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

现在，让我们在配置中添加一个加载器以转换Javascript文件。这将使我们能够在代码中使用ES2015 +语法（在最终版本中它将自动转换为ES5）。

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},

使用文件加载器进行示例配置

{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},

@ svgr / webpack加载器的 示例配置

{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}

外挂程式

插件是webpack的基础，因为它的所有工作基本上都建立在插件系统上。它们极大地扩展了引导加载程序的功能。

加载程序对任何格式的文件进行预处理。在软件包创建期间或之前，它们在单个文件级别工作。加载程序完成后，插件打开。插件通常仅执行一项功能。

要使用它们，您需要在配置文件的plugins部分中添加必要的插件。

插件示例：

html-webpack-plugin-用于生成html文件
copy-webpack-plugin-将单个文件或整个目录复制到构建目录中。
definePlugin-允许您创建全局常量
HotModuleReplacementPlugin-打开HMR模式，仅更新已更改的部分，而无需完全重新加载应用程序。

添加了插件的示例配置：

plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],

我们还将添加UglifyjsWebpackPlugin插件，以最小化js代码，为此，您需要安装uglifyjs-webpack-plugin并将其添加到优化部分

optimization: {
   minimizer: [new UglifyJsPlugin()]
},

Webpack设置基础

引导程序

外挂程式

More articles: