这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

简单的前端项目配置

在前后端分离的时代，前端也需要开始配置各种环境，本次是为了写一个vue项目而配置环境。

在之前的vue项目基本上我一直都是使用vue cli直接将环境搭建起来的，所以对于一些配置了解的不多。所以这次打算好好手动搭建一下这个架子（虽然可能一点都不标准就是了）

包管理工具 yarn

一般而言前端的包管理工具是npm，是一款足够经典和流行的工具，虽然在国内速度不够快，但是也可以使用cnpm去进行代替

不过最近我更喜欢使用yarn。这是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，Yarn 是为了弥补 npm 的一些缺陷而出现的。

最重要的特点是速度超快。原因在于Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。

yarn安装命令：npm install -g yarn 查看版本： yarn --version

yarn版本.png

官网：yarn.bootcss.com/

安装依赖

前端项目的搭建依赖是必不可少的，当然首先先初始化项目，现在我习惯使用vs code工具来调试项目。

初始化命令： yarn --init 或者 yarn init

yarn初始化.gif

之后就是开始使用yarn add安装各种依赖了

以下是我安装的各种依赖，可供参考：

"dependencies": {
    "babel": "^6.23.0",
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.2.0",
    "style-loader": "^3.2.1",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "vue": "^2.6.14",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
},

webpack配置

在配置前端项目当中，最重要的部分应当是webpack了。之前我在学习TypeScript时也曾经写过有关如何将TS文件打包成JS文件的配置，本次的原理基本也是一样的，只不过是多了html和CSS两个文件

可参考：

同样需要创建webpack.config.js，因为之前学过TS，所以我将入口文件转变成了main.ts文件,之后配置webpack将main.ts输出为main.js

HTML

有关于JS的打包还是与之前打包typescript文章中相同，只不过现在多出来了index.html这一显示界面

如果需要将html界面也产生，需要使用到：HtmlWebpackPlugin

HtmlWebpackPlugin简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件

使用时在顶部用require导入后： const HtmlWebpackPlugin = require('html-webpack-plugin');

在module.exports的配置中写入new HtmlWebpackPlugin，当然可以将你需要的index.html模板进行指定。如果不指定的话也会自动产生一个index.html

plugins: [
    new webpack.HotModuleReplacementPlugin(),  //热更新插件
    new HtmlWebpackPlugin({ template: './index.html' }),  // 对应生成的js载入的html
]

这里不需要担心打包出的main.js文件没有引入，打包出的index.html会主动将js和css引入

CSS

在创建独立的CSS使用时，我使用了MiniCssExtractPlugin插件，这个的好处是可以指定生成一个css文件，并且设定其名称和位置。之前看过一篇文章中说起ExtractTextPlugin，不过ExtractTextPlugin已经太老了，在webpack的官方推荐的也是MiniCssExtractPlugin插件来替代。

配置也很简单，首先导入需要的，命令：const MiniCssExtractPlugin = require("mini-css-extract-plugin");

然后在module中配置css-loader:(前一个是typescript的，后一个是css的)

module:{
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    },{
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
    }]
},

最后在plugins添加：

new MiniCssExtractPlugin({
    filename: "[name].css",
})

注意：不过此时本地的CSS引入并不是通过link标签先在index.html中引入，需要在main.ts文件中写入。使用import导进去

import './css/paino.css'  // 可以使用import将css引入

打包脚本

此时在package.json中已经将打包的运行脚本写入了

"scripts": {
    "dev": "webpack --mode development"
}

之后在控制台运行命令：npm run dev

yarn打包.gif

现在打包的结果被我输出在src文件夹下，里面有一个基本的三个文件：

index.html
main.js
main.css

最简单的前端项目配置就这样结束啦！

遇到的问题

在配置MiniCssExtractPlugin中，一切按照上面的步骤来，虽然打包需要生成的文件都出来了，但是又报错信息，这受的了吗，肯定不行呀。

报错信息：

ERROR in ./node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js 10:19-44

Module not found: Error: Can't resolve './normalize-url'

这个我在网上还真没找到有这种问题的

然后直接去源文件报错的地方看了，既然说Can't resolve './normalize-url'，那就去找找看出错的语句

然后找到了这么一句话：var normalizeUrl = require("./normalize-url");

发现给它简单的加上.js就解决了。 var normalizeUrl = require("./normalize-url.js");