Learn more about the module packaging tool webpack

The following is the code in the mathUtils.js file and the main.js file: (CommonJS modular specification, CommonJS is a modular standard, nodejs It is the implementation of CommodJS (modularization)

2, command

webpack. /src/main.js ./dist/bundle.js(Package the main.js file into a bundle.js file)

Note: In the same way, you can also use the ES6 modular specification

3. Create the webpack.config.js file to simplify the packaging command

(map the packaging command to packaging Entry and exit)

Code in this file:

##entry: is the packaged entry

output: For the packaged export

we need to obtain the path in the output dynamically,
• so we can use Node.js syntax to import A module. This module is path (const path = require('path'). The file within the quotation marks needs to be found in the node package)
• Used through the
• npm init command (initialization)node.js
Then generate the
• package.json file (this file describes the information of the current project) license: "ISC" (open source for the project), the following is package.json Code

Explanation: If you want to use node, you must rely on the package.json file

After npm install webpack@3.6.0 --save-dev, add the following dependencies

4. Map the webpack command to npm run

webpack to entry and exit, you can also map webpack The command is mapped to npm run Some operations (need to be modified in the **"script"** script tag in package.json). .

4. How to use loader

1. What is loader

• loader is a very core concept in webpack

We mainly use webpack to process js code, and webpack will automatically handle dependencies related to js before.
• However, in development, it is not only processed by the basic js code, but also needs to be loaded. css, pictures, including some advanced ones such as converting ES6 to ES5 code, converting TypeScript to ES5 code, converting scss and less to css, converting .jsx and .vue files into js files, etc.
• Regarding the capabilities of webpack itself, these transformations are not supported.
• At this time, just extend the
• webpack extension corresponding to the loader.

2. Loader usage process

1), css file processing

main.js that is entry file and then we need to import Corresponding loader

• Step 1:Install the loader you need to use through npm
  (npm install --save-dev css-loader) (npm install - -save-dev style-loader)
  In the official website of webpack, find the following usage method of style loader:
  
  

• Step 2: Configure under the modules keyword in webpack.config.js

Instructions: Among them css-loader is only responsible for loading css files, and is not responsible for embedding specific css styles into documents

At this time, we also need a style- loaderHelp us handle

Note: style-loader needs to be placed in front of css-loader.

2), less file processing

• Step 1: Install the corresponding loader (note: here Less is also installed because webpack will use less to compile less files). Command: npm install --save-dev less-loader less

• Step 2: Modify the corresponding configuration file (in webpack.config .js) for processing .less files. As follows:

3), image file processing

• Step 1: Add two pictures to the project (one is less than 8kb, the other is larger than 8kb)

• Step 2: First consider adding css Reference images in the style, is as follows

  

• ##Step 3: Modify the corresponding configuration file (in webpack .config.js) for processing image files. As follows:

  

• Step 4: An error was found after packaging, because images larger than 8kb will pass file-loader Processing, but there is no file-loader in our project. (You need to install file-loader, command npm install --save-dev file-loader). After installation and packaging, you will find that there is an additional image file in the dist folder.

  

Description:

• found that webpack automatically generated a very Long name
  1. This is a 32-bit hash value, the purpose is to prevent name duplication

  2. However, in actual development, there may be certain requirements for packaged image names
  

• So, we can add the following options in options:
  1. img: the folder where the file is to be packaged

  2. name: get the original name of the picture and put it in This position
  3. hash8: In order to prevent image name conflicts, hash is still used, but only 8 bits are retained
  4. ext: Use the original extension of the image
  as follows:
  
  

• You also need to configure and modify the path used by the image
  1. By default, webpack will return the generated path to the user

  2. However, The entire program is packaged in the dist folder, so here you need to add another dist/
  to the path as follows:
  
  

4), ES6 to ES5 babel

5 , Configure Vue in webpack

Step 1: Terminal execution command (npm install --save vue)
• Step 2: Import vue in main.js (import Vue from 'vue' ) as follows

• Step 3: Hang p to vue in index.html For example, as follows

• Step 4: An error is found after packaging. We need to specify that the vue we are using is the runtime-compiler version of.

Specific operations: You need to add resolve to webpack and take an alias (alias), as follows:

6. How to use Vue in webpack

Step 1: Hang p on the vue instance in index.html

Step 2: Import the APP component into the main.js file, and register the APP, in the Vue instance Use this component APP (Componentization) in the Vue template

Step 3: Create the APP.vue file and change the # of the vue page ##Template and js code, css code are separated, as follows

7. Use of plugin

1. Get to know the plugin

What is the plugin?
• 1. Plugin means plug-in, which is usually used to extend an existing architecture.
  2. Plug-ins in webpack are various extensions to the existing functions of webpack, such as packaging optimization, file Compression, etc.
  
The difference between loader and plugin
• 1. Loader is mainly used to convert certain types of modules. It is a
  converter 2. Plugin is a plug-in. The extension of webpack itself is an
  extender
plugin usage process
• 1. Step 1: Installing through npm requires the use of plugins (some webpack already built-in plugins do not need to Installation)
  2. Step 2: Configure the plug-in in plugins in webpack.config.js
  

2. Webpack-Add copyright information Plugin usage

3. Plugin for packaging html

4. js compression Plugin

Webpack provides an optional
• local development server

  . This local server is built based on node.js and uses the express framework internally to achieve what we want for the browser Automatically refresh to display the modified results .

But it is a separate module, you need to install it before using it in webpck
• Command: (npm install --save-dev webpack-dev-server@2.9.1 )

  
  

devserver is also an
• option

  in webpack. The option itself can be set with the following properties: 1. contentBase: which folder provides local services, the default is the root folder, we need to fill in ./dist 2. port: port number
  3. inline: page refresh in real time
  4. historyApiFallback: In the SPA page, rely on the history mode of HTML5
  
  

The webpack.config.js file configuration is modified as follows:

• 
  

–open parameter means opening the browser directly

In addition,
below we want to separate the webpack configuration file: that is,

are separated from the things you need to publish(compile). as follows:

npm install -g @vue/cli

vue init webpack my-project