Webpack Core Concepts

Source: Internet
Author: User

First, Webpack four core concepts 1, the entrance "Entry"

Webpack will create all application dependency diagrams. The starting point of the chart is called the entry point. The entry start tells Webpack where to start and follow the dependency graph to know what to pack. You can think of the entry point of your app as the first startup file that follows the context or app.

const config = {  entry: {    app: ‘./src/app.js‘  }}module.exports = config;
2. Export "Output"

Pack all the resources together, and still tell Webpack where to pack our apps and where to go to package the resources.

const config = {  entry: {    ‘./src/app.js‘  },  output: {    filename: ‘webpack.bundle.js‘,    path: ‘./dist‘  }}module.exports = config;
3, loader "Loader"

The goal of Webpack is to make all the resources in a project a webpack concern, and the browser does not need to consider these (which does not mean that resources must be packaged together). Webpack handles each file (. css,. html,. scss,. jpg,. etc) as a module. However, Webpack only understands JavaScript, and all require loaders to handle other types of files.
Because the files have been added to the dependency chart, all Webpack loaders convert the files to modules.
The two targets to be implemented by the loader property:
(1) Identify the files that should be converted by a particular loader;
(2) Conversion can be added to dependent chart files (and eventually packaged)

const config = {  entry: {    app: ‘./src/app.js‘  },  output: {    filename: ‘webpack.bundle.js‘,    path: ‘./dist‘  },  module: { loaders: [ { test: /\.(js|jsx)$/, loader: ‘babel-loader‘ }, { test: /\.css$/, loaders: [‘style‘, ‘css‘] } ] }}module.exports = config;

Loader two required properties test and loader tell Webpack the following behavior: Webpack compiler, when you encounter a require()/import path that is resolved to or in a statement .js .jsx , before you add and package them, Use Babel-loader to convert first. Similarly, CSS is the same, but the use of the loader module is different.

4, plug-in "Plugins"

The loader performs transformations based only on a single file, and plug-ins are most commonly used (but not limited to) to perform actions and custom functions when packaging the module's "Compile" and "block". Webpack's plug-in system is extremely powerful and customizable.
In order to use plug-ins, you need to require them and add them to the plugins array. Most plugins can be customized by potion. Since you can use plug-ins for different purposes in one configuration multiple times, you need to use new to create an instance of the plug-in and invoke the plug-in.

Const HTMLWEBPACKPLUGIN =require ( ' Html-webpack-plugin ');  Const HTMLWP = new htmlwebpackplugin ({Template: const config = {entry: {app:  './src/app.js '}, Output: {filename: module: {loaders: [{test: /\. ( JS|JSX) $/, loader:  ' Babel-loader '}, {test: /\.css$/, loaders: [ Span class= "hljs-string" > ' style ',  ' CSS ']}]}, plugins: [HTMLWP]} module.exports = config;       
Two, Webpack parsing three file paths

(1) Absolute path
(2) Relative path
(3) Module path

Webpack Core Concepts

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.