This is the 24th day of my participation in the August Text Challenge.More challenges in August

Simple front-end project configuration

In the era of front end separation, the front end also needs to start configuring various environments, this time for writing a VUE project to configure the environment.

In previous VUE projects, I basically used the Vue CLI to directly set up the environment, so I didn’t know much about some configurations. So this time I’m going to build the shelf manually (although it may not be standard at all)

Package management tool YARN

Generally speaking, the front-end package management tool is NPM, which is a classic and popular tool. Although it is not fast enough in China, CNPM can also be used to replace it

But these days I prefer to use YARN. It’s a new JS package management tool from Facebook, Google, Exponent and Tilde, and Yarn has emerged to remedy some of NPM’s shortcomings.

The most important feature is super speed. Yarn caches every downloaded package, so you do not need to download it again. Parallel downloads are also used to maximize resource utilization, so installation is faster.

Yarn Installation command: NPM install -g yarn View the version: yarn –version

Liverpoolfc.tv: yarn.bootcss.com/


Install dependencies

Building dependencies for the front-end project is essential, of course, starting the project first, now I’m used to using VS Code tools to debug the project.

Initialization command: yarn –init or yarn init

After that, it’s time to install the dependencies using YARN Add

Here are the various dependencies I installed for your reference:

"dependencies": {
    "babel": "^ 6.23.0"."css-loader": "^ 6.2.0"."html-webpack-plugin": "^ 5.3.2." "."less": "^ 4.4.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"
},
Copy the code


Webpack configuration

The most important part of configuring the front end project should be WebPack. When I was learning TypeScript, I wrote about how to package TS files into JS files. This time the principle is basically the same, but with HTML and CSS files

May refer to:

  • Webpack typescript
  • Webpack5 hot update package TS
  • Webpack 4-2. Packing CSS
  • “HtmlWebpackPlugin”

I also need to create webpack.config.js, because I learned TS before, so I converted the entry file to main. TS, and then configured webpack to output main. TS as main.js

HTML

JS is packaged the same way typescript articles are packaged, but now has an index. HTML display

If you want to generate HTML interface, you need to use: HtmlWebpackPlugin

The HtmlWebpackPlugin simplifies the creation of HTML files to serve your Webpack. This is especially useful for Webpack packages that have hash values in their file names and that change with each compilation. You can ask the plugin to generate an HTML file for you

Const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

Add new HtmlWebpackPlugin to the module.exports configuration, of course specifying the index.html template you want. If not specified, an index.html is automatically generated

plugins: [
    new webpack.HotModuleReplacementPlugin(),  // Hot update plugin
    new HtmlWebpackPlugin({ template: './index.html' }),  // Load the HTML corresponding to the generated JS
]
Copy the code

There is no need to worry that the packaged main.js file is not imported, the packaged index.html file will actively introduce JS and CSS

CSS

I used the MiniCssExtractPlugin to create a separate CSS use, which has the advantage of specifying a CSS file to be generated and specifying its name and location. Previously read an article about ExtractTextPlugin, but ExtractTextPlugin is too old, in the official recommendation of webpack is also MiniCssExtractPlugin plugin to replace.

Const MiniCssExtractPlugin = require(” mini-CSs-extract-plugin “);

Then configure csS-loader in module (typescript, CSS)

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

Finally add the following to the plugins:

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

Note: Native CSS is not introduced in index.html via the link tag, but in main.ts. I’m going to import it

import './css/paino.css'  // You can use import to import CSS
Copy the code

Packaging scripts

At this point, the packaged run script has been written in package.json

"scripts": {
    "dev": "webpack --mode development"
}
Copy the code

Then run the command NPM run dev from the console

The result of the package is now printed in the SRC folder, which contains a basic three files:

  • index.html
  • main.js
  • main.css

That’s the end of the simplest front-end project configuration!


Problems encountered

In the MiniCssExtractPlugin configuration, everything according to the above steps, although the package needs to generate files are out, but the error message, this is affected by it, certainly not it.

Error message:

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

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

I can’t find anyone on the Internet with that kind of problem

/normalize-url Can’t resolve ‘./normalize-url

Var normalizeUrl = require(“./normalize-url”); var normalizeUrl = require(“./normalize-url”);

It’s easy to add.js to it. var normalizeUrl = require(“./normalize-url.js”);