Entry, output, module analysis of webpack3.x-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Entry, output, module analysis of webpack3.x

php中世界最好的语言

Mar 10, 2018 pm 01:56 PM

module output

This time I will bring you the entry, output, and module analysis of webpack3. one time.
As a popular tool today, webpack is inseparable from the three major front-end frameworks, so it is necessary to learn it;

Prerequisites: There is a node environment and npm tools; (new version The node comes with the npm tool);

Now let’s do it step by step:

1. First select a directory as the location where your project is stored;

cmd The tool enters the project directory (assuming mine is D:\webpack-demo4); and then uses nmp

to install

webpack: npm install webpack --save-dev("Global installation is not recommended"); Use npm init after finishing your project directory, followed by some descriptive content. How to omit it and directly npm init -y;

Entry, output, module analysis of webpack3.x dist and src directories I created it myself, dist is used to store compiled files, and src is used to store source files; node_modules is a newly initialized folder with various modules in it. In the future, all modules related to project construction will be (it should also be ) placed in this directory; webpack.config.js is the webpack configuration item; package.json is some configuration for node operations (in fact, it is for webpack);

Webpack.config.js configuration (so many for now) );

Entry, output, module analysis of webpack3.x First of all, let’s talk about what this configuration is used for. In fact, it is to tell webpack how to package; explain them one by one; ##Entry file

; It means which js file it starts from; talk about this relative path, this is calculated from the directory you enter with the cmd command line; for example, mine is:

[ webpack- demo4] -->There is dist directory and src directory below; then when I run the configuration, I should go to webpack-demo4 and then webpack --config webpack-config.js (or webpack directly);

output The output of the setting: The result of the above setting is that after webpack is packaged, app.bundle.js and print.bundle.js will be generated in the js folder in the dist directory. Name is actually the key in the entry;

module There are two loaders for loading files and css stored in it;

Of course, before running webpack, you need to install npm install style-loader css loader --save -dev and npm install file-loader --save -dev; When you need to cd to the webpak-demo4 directory;

Now I have an index002.html written by myself in the dist directory: as follows;

<html>
  <head>
   <title>Output Management(输出)</title>
    <meta charset=utf-8>
  </head>
  <body> 
  </body>
</html>
<script src="./js/app.bundle.js"></script>

Copy after login

There are two js files in the src directory;

　index.js
import _ from &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    btn.onclick = printMe;
    div.appendChild(btn);
    return div;
}
document.body.appendChild(component()); //放回元素给到页面;

Copy after login

Let’s talk about something important; import '../css/style1.css'; is that there is style1.css under css in the superior directory (src) relative to index.js; for example, I wrote The background of the body is blue; a picture is also stored under img;

Then the picture and print.js are introduced respectively;

print.js:

export default function printMe() {    console.log(&#39;print.js...&#39;);}
    完成之后,直接

Copy after login

Command webpack in cmd; pictures and styles appear; check that the packaged js and pictures will appear in the dist directory; the above example shows how webpack packages css, pictures and other simple operations;

believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7648

CakePHP Tutorial

1392

What is the format of the account name of steam

win11 activation key permanent

nyt mini crossword answers

110

Related knowledge

ModuleNotFoundError: How to solve Python module not found error? Jun 25, 2023 pm 09:30 PM

During the development process of Python, we often encounter module not found errors. The specific manifestation of this error is that Python reports one of two errors: ModuleNotFoundError or ImportError when importing the module. This error is very annoying and can cause the program to not run properly, so in this article, we will explore the causes of this error and how to solve it. ModuleNotFoundError and ImportError in Pyth

Java9 new feature Module modular programming method May 19, 2023 pm 01:51 PM

In the Java9 version, the Java language introduced a very important concept: module. If you are familiar with the modular management of JavaScript code, you should feel familiar when you see the modular management of Java 9. 1. What is Javamodule? Somewhat similar to packages in Java, modules introduce another level of grouping of Java code. Each such group (module) contains many sub-packages. Declare the folder and its subfolders as a module by adding the file module-info.java to the root of a module's source code file package. The file syntax

Front-end output settings Feb 19, 2024 am 09:30 AM

Front-end output configuration requires specific code examples. In front-end development, output configuration is a very important configuration. It is used to define the file path, file name and related resource paths generated after the project is packaged. This article will introduce the role of front-end output configuration, common configuration options, and give specific code examples. The role of output configuration: The output configuration item is used to specify the file path and file name generated after the project is packaged. It determines the final output of the project. Packaged in webpack etc.

How to solve the problem of 'module fuse not found' when mounting ntfs disk under Linux system? Dec 31, 2023 pm 03:17 PM

1. First confirm the Linux system kernel [root@localhost~]#uname-r-p2.6.18-194.el5i6862. Go to http://sourceforge.net/projects/linux-ntfs/files/ to download the rpm package of the corresponding kernel. If you can't find the exact same one, you can find the closest one. I couldn't find the exact same one. What I downloaded is: kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3. Install the rpm package rpm-ivhkernel -m

Output, the core concept of webpack Aug 09, 2022 pm 06:32 PM

Once you have all your assets together, you need to tell webpack where to package your application. The output attribute of webpack describes how to handle bundled code. The following article will give you an in-depth understanding of the output (Output) in the core concept of webpack. I hope it will be helpful to you!

Vuex Module-Introduction to the use of state warehouse partitioning Aug 10, 2022 pm 04:01 PM

Vuex mainly consists of the following five parts: State, Getter, Mutation, Action, and Module. Below I will introduce Vuex Module-state warehouse segmentation. I hope it will be helpful to friends in need!

How to use Python's OS module and examples Apr 22, 2023 pm 10:19 PM

Python's os module is one of the standard libraries used for interacting with the operating system. It provides many useful functions and variables for working with files and directories. The following are the usage of some common os module functions: 1. Get the current working directory: importoscwd=os.getcwd()print(cwd) 2. Switch the current working directory: importosos.chdir('/path/to/new/directory' )3. List all files and subdirectories in the directory: importosfiles=os.listdir('/path/to/dire

Steps for exporting wps2019 tables to pictures Mar 27, 2024 pm 04:51 PM

1. Use wps2019 to open the table to be edited. 2. Click the [File] menu item in the upper left corner of the wps2019 window. 3. In the pop-up file drop-down menu, click the menu item [Export as Image]. 4. A window for outputting to pictures will pop up. Select the output quality format in the window. 5. Click the Format drop-down menu and select the format you want to save as an image in the pop-up menu. 6. Finally, click the Save to back option button to set the location where you want to save the image. 7. After clicking OK, a prompt indicating successful output will pop up after a while.

See all articles