Record modular Development

Source: Internet
Author: User

GitHub Project address:Modules

Modular development has become one of the following trends. It has never been used before. Recently, I have learned from a video. I mainly use webpack. Of course, the principle of webpack is not very clear. I have read the documents before and am confused. Still unable to learn. It is barely usable now. With the mainstream development of the front-end, node NPM webpack vue react angular cannot be fewer than one. However, I am helpless and weak, and now I will only be a vue, you can use the fur to record it.

 

The main project directory is configured by using webpack. The principle is not very clear. During the writing process, various dependency packages are installed through npm I, and node webpack is integrated for output, like the webpack above. dev. config. JS (Development Environment)/webpack. prod. config. JS (production environment) for output, define the portal file export file configuration rules (loader XXX-loader. personal Understanding ). Then, get used to import from, export default/export XXX, and run the compilation output through the command line.

Const Path = require ("path"); // node native apiconst htmlwebpackplugin = require ('html-webpack-plugin'); module. exports = {// entry: {// you can have multiple entries or one entry. If one entry is exports, 'main. js ':'. /src/main. js' // entry file in my project}, // export output: {path: path. resolve ('. /Dist '), // API filename of the relative path to the absolute path node: 'build. js' // single quotes can be changed at will without single quotes.}. // The Declaration module contains various loaders. loader module: {loaders: [// a later version of webpack is called rules {test :/\. xxx $/, loader: 'xxx-loader '}, // loading rule. There will be multiple loaders]}, plugins: [// The execution sequence of the plug-in is related to the index of the element. New htmlwebpackplugin ({template :". /src/index.html ", // reference object})],}

  

I have time to look at the principles of webpack later, so I will introduce my first introduction to modularity. Bytheway, these things cannot help everyone, because better websites are everywhere, permission is the note you have made for yourself. Even if it is lost one day, you can still find it here to let yourself have a deposit. Fuel Learning

Record modular Development

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.