Webpack is configured from zero. Take Vue project as an example!

Time:2021-11-29

preface

Don’t talk about the definition and description of nonsense!

1. Initialize a new project
Webpack is configured from zero. Take Vue project as an example!
There will be a package. JSON file
Webpack is configured from zero. Take Vue project as an example!

2. Install webpack and command line commands
Webpack is configured from zero. Take Vue project as an example!
OK, the installation is complete
Webpack is configured from zero. Take Vue project as an example!
Now you can use the webpack command, such as:
Webpack is configured from zero. Take Vue project as an example!
Come and see what you’ve packed!
Webpack is configured from zero. Take Vue project as an example!
OK! Let’s go on
3. Let’s configure the config file
(it is mentioned here that webpack 4 has a default configuration entry file: the default is./src/index.js, export file: the default is./dist/main.js)
Webpack is configured from zero. Take Vue project as an example!
Then create the script
Webpack is configured from zero. Take Vue project as an example!
Now we can do simple packaging
Webpack is configured from zero. Take Vue project as an example!

4. Configure plug-ins
HTML copy, JS path addition
Webpack is configured from zero. Take Vue project as an example!
Webpack is configured from zero. Take Vue project as an example!
Then the packaged HTML will be copied
Webpack is configured from zero. Take Vue project as an example!
You can also copy some files, such as favicon.ico
Webpack is configured from zero. Take Vue project as an example!
Build again and you will copy favicon.ico
Webpack is configured from zero. Take Vue project as an example!
Next, clear the original dist file
Webpack is configured from zero. Take Vue project as an example!
In this way, the file will be cleared before copying again
5. Prepare for the introduction of Vue
Webpack is configured from zero. Take Vue project as an example!
Now web pack cannot parse Vue, so we need to introduce Vue loader and template compiler
Webpack is configured from zero. Take Vue project as an example!
Webpack is configured from zero. Take Vue project as an example!
6. Run locally and join devserver

That’s all for today… Have time to continue updating

Recommended Today

On the mutation mechanism of Clickhouse (with source code analysis)

Recently studied a bit of CH code.I found an interesting word, mutation.The word Google has the meaning of mutation, but more relevant articles translate this as “revision”. The previous article analyzed background_ pool_ Size parameter.This parameter is related to the background asynchronous worker pool merge.The asynchronous merge and mutation work in Clickhouse kernel is completed […]