如何从头开始配置 Webpack 和 Vue

嗨，大家好！

像vue-cli、create-react-app和@angular/cli这样的工具，让开发者免去了配置项目和应用程序的麻烦。这为开发者节省了大量时间，让他们无需阅读 Webpack 文档以及构建这些工具所需的其他插件或库。我们只需安装一次，运行或在命令行中调用它，一个预先配置好的项目就摆在我们面前，我们可以立即开始编写代码或编程。

但我是个好奇的人。我想知道事情是怎么回事。所以，我们言归正传吧。

执行此操作之前，请先安装Node.js。
从您的桌面运行此命令。

   mkdir vue-webpack && cd vue-webpack
   npm init --y

基本上，这意味着我们正在创建一个名为vue-webpack的目录（ md ），并将当前目录（cd）桌面更改为vue-webpack ，并使用npm init --y命令和默认配置创建一个package.json文件。

   npm i -D @babel/cli @babel/core @babel/preset-env babel-loader 
   webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader 
   vue-template-compiler css-loader vue-style-loader

i是install的别名。
-D表示我们将其作为开发依赖项安装。

@babel /cli和@babel /core：这些包让我们可以在命令行中转换 JavaScript 代码，或者我们可以以编程方式转换它。

@babel /preset-env：这个包让我们能够在代码中使用 JavaScript 的最新特性，主要是 ES6 特性以及一些 ES7 和 ES8 特性。如果你想使用async/await特性，你可能需要@babel /polyfill库。

babel-loader：Webpack 需要它来使用 Babel 转换我们的 Javascript 代码。

webpack和webpack-cli：webpack 核心功能和 webpack 命令行实用程序，因此我们可以运行一些自定义的 webpack 命令。

webpack-dev-server：它提供了一个实时开发服务器，每次文件更改时都会重新加载浏览器页面。

html-webpack-plugin：此插件生成一个 HTML 文件，或者我们可以指定一个现有文件来为我们的捆绑包提供服务。

vue-loader和vue-template-compiler ：我们需要这两个，以便 webpack 可以理解和转换具有.vue扩展名的文件。

css-loader和vue-style-loader：我们需要这两个，以便我们可以在 Vue 文件中使用css 样式标签。

  npm i -P vue

-P表示我们将其安装为生产依赖项。

vue：我们显然需要它来制作 Vue 应用。真是的😃。

我们的index.html文件。

我们的webpack.config.js文件。

好的，我不会解释所有这些，只解释重要的部分。我们借助path.join方法和节点提供的全局变量__dirname指定主文件的入口路径。我们使用两个属性指定输出：要创建的文件夹的路径和名称捆绑的文件名。并且在devServer对象中，我们指定端口（在此示例中为1000）并将open属性指定为 true，这会在启动应用程序时自动打开浏览器，将hot属性指定为 true，当我们更改目录中的文件时会重新加载页面。historyApiFallback属性指定将提供index.html文件而不是404响应。我们模块中的数组rules属性是我们对加载器文件的配置。在plugin属性中，我们指定应用程序中需要的插件，首先我们实例化HotModuleReplacementPlugin，以便我们可以在应用程序中启用热重新加载。我们的vue文件需要 VueLoaderPlugin ，最后，在HTMLWebpackPlugin中，我们传递了必要的选项，我们指定了favicon的路径，如果您没有 favicon，请删除此选项，即我们的模板文件的路径，在本例中是 index.html 文件。