随着前端项目的日益复杂，webpack成为了前端必备的构建工具之一。但是，大多数教程和文章都使用了诸如webpack-dev-server和其他类似的依赖包来讲解webpack的使用方法，这样会使新手对于webpack的概念和使用变得模糊。为了帮助大家更好地理解webpack，本文将介绍一些不用依赖包的webpack实战问题，包括真实场景中的实际应用。
前置条件
在本文中，我将使用以下工具和技术:
- Node.js v13.1.0
- npm v6.12.0
- webpack 4.41.2
问题1：如何制作多页面应用（MPA）
在实际应用中，有些场景需要同时显示多个页面（例如博客网站）。此时，你将需要使用webpack来制作多页面应用。下面是一些示例代码：
首先，在你的项目根目录下创建一个pages文件夹，然后在该文件夹内创建你的多个HTML页面（例如home.html和about.html）。
接下来，在你的 webpack 配置文件中设置 entry 选项：
module.exports = {
entry: {
home: './src/home.js',
about: './src/about.js'
}
};这将会告诉webpack编译两个JavaScript文件并将其输出到各自的home和about文件夹中。然后，你可以在你的HTML页面中使用这些js文件：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
------- -------------------------------
-------
--------- -------------------- ---- -------
--------- -----
------
------
--------------------
-------
------
------- --------------------------------
-------
-------这样，你的多页面应用就完成了。
问题2：如何使用PostCSS
PostCSS是一个非常强大的CSS预处理器，它可以帮助你编写更加直观和优雅的CSS代码。下面是一个简单的webpack配置文件，它使用了PostCSS：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------------- - -----------------------------------
----- ------------ - ------------------------
----- ------------------ - --------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
- ----- --------- ---- ----------------------------- ------------- -------------------
--
-------- -
--- ---------------------------
--- ----------------------
--------- ------------
--
--
---------- -
------------ --------
--
----- -------------
--此配置假设您已经安装了以下依赖包：
npm install --save-dev mini-css-extract-plugin postcss-loader autoprefixer clean-webpack-plugin
同时，请在项目根目录中创建一个名为.postcss.rc的文件：
{
"plugins": {
"autoprefixer": {}
}
}这将告诉PostCSS在编译时使用autoprefixer插件。你可以在你的CSS文件中使用任何PostCSS插件。
问题3：如何使用babel
Babel是一个非常流行的JavaScript编译器，用于将ES6（或更高版本的JavaScript）编译成传统的ES5代码。在webpack 中与Babel 集成非常容易，下面是一些示例代码：
首先，在你的项目根目录下创建一个.babelrc文件：
{
"presets": ["@babel/preset-env"]
}接下来，你需要安装一些Babel依赖包：
npm install --save-dev @babel/preset-env babel-core babel-loader
然后，在webpack配置文件中添加Babel选项：
-- -------------------- ---- -------
-------------- - -
-----
------- -
------ --
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
--这将会告诉webpack在编译时使用Babel。你可以使用任何Babel插件来定制你的编译器设置。
结论
webpack是一个非常强大的前端工具，它可以帮助你编译和构建现代的前端应用程序。本文介绍了几个不用依赖包的webpack实战问题，包括多页面应用程序、PostCSS的使用以及如何使用Babel。通过学习这些问题，你将更好地理解webpack并能更加高效地使用该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670d07115f551281025c3e08