Self configuring front-end development environment (I)

Time:2021-10-17

start

Recently, I talked with several partners about how to configure a development environment using Vue without using Vue cli. So I have the idea of writing this article to summarize and record my experience in configuring a development environment

Installation of tools and frames

Because individuals are used to using Vue, and module management tools mostly use webpack, here we use webpack to manage and package packages in development and production environment, and use Vue to build pages.

install

We create a new folder and enter it

mkdir jon-cli
cd jon-cli

NPM initial words

npm init

Then all the way to Yes (or you can use NPM init – y, you can directly all yes)

Next, install our package management tool webpack

npm install -save-dev webpack webpack-cli

Note: the – save dev here installs webpack in the development environment, and we also install webpack cli because webpack and webpack cli are separated after webpack 4.0.
And then there’s another one to pay attention to ⚠️: Some online tutorials say that you need to install webpack cli globally. In fact, you don’t need to, and I suggest not to do that here, because after you install webpack cli globally, you may not update it for a long time, and then your project development version may change, which will cause the problem of version incompatibility.

Configure project file structure

We already have package.json and package-lock.json files in the Jon cli directory after installing webpack. Now we are creating a SRC directory and config to store our project resources and webpack configuration files

mkdir src config

Then we create three new files in the config directory to split the public configuration, development environment configuration and production environment configuration of webpack.

touch webpack.common.js webpack.dev.js webpck.prod.js

Create a new main.js file in the SRC directory to serve as the entry packaging file of webpack. Now our directory is as follows:

Self configuring front-end development environment (I)

Perform simple packaging

Now let’s write the basic configuration of the webpack
Open webpack.common.js and write the following

const path = require("path");

let config = {
    mode: process.env.NODE_ENV === "development" ? "development" : "production",
    entry: path.resolve(__dirname, "../src/main.js"),
    output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    },
};

module.exports = config;

Let’s explain the above configuration:
Firstly, the webpack runs on the node side, so we can use the package provided by the node. We introduce path to process the file path; Define a config object;

mode: two modes are supported: the development mode and the production mode (the default mode). We can also configure the mode in the NPM scripts command without configuring the mode in the webpack configuration file

webpack --mode=production

entry: package entry file path
Usage: Entry: string|array < string > | {[entrychunkname: String]: string|array < string >}
Here we configure a single page application, so we won’t discuss how to configure the specific use of multi page application and entry. The value of entry here is a string, which represents the path of the entry file you need to package

output: output packaged files
Usage:

output: {
    Path: '', // output file path
    filename: "output[hash][name].js",    
//Output file name. You can use [hash] to output the file with hash value, so that you can insert the file with hash value when using HTML to generate plug-ins
JS file, which can avoid file caching; [name] usage is to insert the key value (object usage) in the entry into the export file.
}

Next, introduce the public configuration in the webpack.dev.js file, merge the development environment configuration with the public environment configuration, and export it

const common = require("./webpack.common");
const merge = require("webpack-merge");


module.exports = merge(common,{

});

What we use here iswebpack-mergeTo merge configurations, you can install it using NPM install – save dev webpack merge

Then we write some code in the Mian. JS file

function test() {
    console.log("this is test function!");
}

Edit our NPM scripts command in the package. JSON file

"scripts": {
    "start": "NODE_ENV=development webpack --config ./config/webpack.dev.js",
},

Now you can use the NPM run start command to package the files in the console; In addition, NPM added NPX command after version 5.2. NPX is used to call modules installed inside the project, so we can also use NPX webpack to package files directly. However, we use script here, which carries parameters, such as writing node of the current development environment_ Env parameter and — config webpack configuration file parameter.

After packaging, we can see that there is an additional dist directory in the Jon cli directory, which is the directory generated after packaging. There is a JS file in it. Now our directory structure is as follows:

Self configuring front-end development environment (I)

The file name of this JS file is determined by the filename attribute in the output option we configured. The series of numbers are [hash] when we configured, but [name] is not displayed. That’s because our current entry uses string form, where the name corresponds to the key in the entry and the key value in the object form, so we don’t have it here, We won’t talk about entry and output in detail here. We’ll talk about how to configure multi page applications in the next article.

Now we can open the JS file under dist, where we can find the code we wrote in the main.js file (there is no mapping here). Now let’s finish configuring a basic package?…