I only know how to spell and use Webpack. Entrusted by the leader to build the framework of the mobile terminal project…

Here I am:



I don’t know anything about Webpack, but I have to keep my cool

“Big brother, what kind of UI framework do we use on mobile?”

“I’ll think about it in a few days. Maybe we should write our own.”

This is where my motivation comes in: UI framework? Isn’t building UI frameworks something I’ve always dreamed of?

“Good boss. Get the job done.”


Expertly open PowerShell, set up vue scaffolding, and configure multiple pages following the tutorial.

OK, here’s the problem:


This configuration only supports the most basic multiple pages!!

What does that mean? If I create a passport folder under SRC /page. After placing the HTML JS vue file with the same name in it, create a reg folder under the Passport folder with the same name page structure in it. This makes reg.html unpackaged.

Think about it for a moment, this kind of problem is generally the cause of wildcards. Maybe the wildcard is not deep enough.

But t take a look at the WebPack-related configuration folder. Suddenly scared…

What the hell is this… What does each document represent?




So I spent the afternoon figuring it out for myself. That’s pretty much it (pictured)

1. Build. js // WebPack’s core packaging tool. Webpack.*.conf.js // WebPack independent environment configuration and plug-in configuration. Such as production environment, test environment, etc. 2. Webpack.base.conf.js // Configure project directory alias, where resource files are packaged and configured (SRC /assets)

3.*.env.js // Where the project environment private variables are configured

4. Index.js // Configure the path of the resource file after the project is packaged, dev environment port number and the place where the server is configured


OK, with the WebPack architecture basically out of the way, let’s test our guess.

Sure enough, after configuring multiple pages. This is what the tutorial looks for in js/ HTML






(Forgive me for forgetting to draw the arrow in the first picture)


Really is the wildcard way to find the page JS. /**/.js, /**/.html. Really solve the problem


Ok, now we’ve finally found the level 2 child page. But there’s something wrong with the packaging. such as

Before packaging:



After the package:



It’s good that the second page becomes the first page


Wouldn’t I be able to access passport/reg.html?


Such problems must not be tolerated. So I set out to solve the problem.

The following line of code is found in the utils.js file:



This code means to find the last “/” of the absolute path and the last “. “following it and cut the file name in it. And then pack it up

Interesting. As if my directory is D: / demo/SRC/page/index/index. The js he will capture the index.

If my directory is D: / demo/SRC/page/passport/reg/reg. Js he will only capture reg. This will cause the output file to be the sibling directory.

We found the cause. Let’s fix it.

Think of it this way: All my pages are in the SRC /page folder. So I go to the “/” at the end of the “page” and I cut all the way to the last “.” So doesn’t he bring hierarchy??

So change the code to this:

let filename = filePath.substring(filePath.indexOf("pages") + 6, filePath.lastIndexOf('. '))Copy the code

This code means to find the subscript of “pages” first, and then +6 subscripts to find the “/” after pages. And then we cut it to the last “.”

The output of the reg page is:

/passport/reg/reg


OK this time the package is packaged again and the directory hierarchy is finally correct



This is finally what the project architecture looks like. But the eldest brother was not satisfied:

“Well, you put your CSS and JS files in the same directory as your HTML. Don’t put him in a separate folder.”

What?? What the hell is this?

After observation, the packaged resource files are placed in the static folder. This led to a property that looked like a resource directory configuration

    assetsSubDirectory: 'static', 

So I replaced it with:

  assetsSubDirectory: '',

The CSS JS folder is the same as the page folder.



This is even messier than before.




After searching for a long time, I found the relative path of js/ CSS output in webpack.*.conf.js file





The general idea of this code is to output the packaged file according to the CSS/JS filename template. But if you put a folder in front of it, it will also automatically create that folder


So get rid of CSS/and js/. Successful problem solving


So happy!! Now the project architecture should be in order


Let me run and see. B: well.. How did the picture come out and page folder the same level?


Maybe… Delete static for resource output folder.


A WebPack plug-in called CopyWebpackPlugin was discovered by looking at who was using the “assetsSubDirectory” attribute

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '.. /static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['*']}])Copy the code

Look at the WebPack document. The plugin will copy your project resources folder intact to a folder in your package directory.

Then this is a good solution, I write to die soon ok

to: './static'Copy the code

This way, the resources and code are packed together. I still feel a little accomplished





At that moment, the eldest spoke again:

“There are a lot of environments in our system. Different environments have different gateways.”

That beats me. At the end of the day, on closer inspection, it turns out to be a different constant for each environment. The interface address does not require a domain name. Just get global gateway + path



So I copied a different webpack.*.conf.js,*.env.js for each environment. Where *.env.js is a stored environment private constant

*.env.js is configured as follows:

'use strict'
const merge = require('webpack-merge')

module.exports = {
  NODE_ENV: '"development"'.// Distinguish the variables of the online/production environment
  SERVER_URL: '" * * * * "'./ / gateway. This parameter is used to configure the interface domain name
  IS_DEBUG: true // Whether to enable Vue Tools
}
Copy the code



Then webpack.*.conf.js needs to be configured:

const env = require('.. /config/dev.env');Copy the code


So you can get global constants in your own code

Example:

<template>
  <div class="aaa"<span> </span> </div> </template> <script>export default {
    name: "index",
    computed: {
      getBaseURL() {
        returnprocess.env.SERVER_URL; < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" } </style>Copy the code


The page then displays the gateway address correctly


At this point. The basic part of the whole project framework is set up. After building, I also know about half of WebPack….

Of course, I will write about the UI framework after the conclusion. Thank you for your support!



There are mistakes welcome correction!



Reference resources:

Building multi-page applications with VUE

Webpack Chinese documentation