Tutorial on using webpack.config.js parameters
This time I will bring you a tutorial on how to use webpack.config.js parameters. What are the precautions for using webpack.config.js parameters? The following is a practical case, let’s take a look.
The webpack.config.js file is usually placed in the root directory of the project, and it itself is also a standard Commonjs specification module.
var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" }, {test: /\.less/,loader: 'style-loader!css-loader!less-loader'} ] }, resolve:{ extensions:['','.js','.json'] }, plugins: [ new webpack.NoErrorsPlugin() ] };
1.entry
entry can be a string, array or object.
When entry is a string, it is used to define the entry file:
entry: './js/main.js'
When entry is an array, it also contains the entry js file. Another parameter can be used to configure webpack. Provides a static resource server, webpack-dev-server. webpack-dev-server will monitor changes in each file in the project, build it in real time, and automatically refresh the page:
entry: [ 'webpack/hot/only-dev-server', './js/app.js'
When entry is an object, we can build different files into different files , use as needed, for example, just introduce hello.js into my hello page:
entry: { hello: './js/hello.js', form: './js/form.js' }
2.output
output The parameter is an object used to define the output of the built file. It contains path and filename:
output: { path: './build', filename: 'bundle.js' }
When we define and build multiple files in the entry, filename can be correspondingly changed to [name].js is used to define the names of different files after they are built.
3.module
Regarding the loading of modules, we define it in module.loaders. Here, regular expressions are used to match file names with different suffixes, and then different loaders are defined for them. For example, define three loaders in series for less files (! used to define cascading relationships):
module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" }, { test: /\.less/, loader: 'style-loader!css-loader!less-loader'} ] }
In addition, you can also add image resources such as png and jpg to be automatically processed when they are less than 10k Loader for base64 images:
{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
After adding loaders to css, less and images, we can not only require js files like in node, we can also require css, less and even image files:
require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = require('./glyph.png');
But what you need to know is that the files required in this way will be inlined into the js bundle. If we need to retain the require writing method and want to take out the css file separately, we can use the [extract-text-webpack-plugin] plug-in mentioned below.
In the first loaders configured in the above example code, we can see a loader called react-hot. My project is used to learn react and write related code, so I configured a react-hot loader, through which the hot replacement of react components can be achieved. We have configured webpack/hot/only-dev-server in the entry parameter, so we only need to enable the --hot parameter when starting the webpack development server to use react-hot-loader. Define it like this in the package.json file:
"scripts": { "start": "webpack-dev-server --hot --progress --colors", "build": "webpack --progress --colors" }
4.resolve
When webpack builds the package, it will sort the files according to the directory. Find, the extensions array in the resolve attribute is used to configure which file suffixes the program can complete by itself:
resolve:{ extensions:['','.js','.json'] }
Then when we want to load a js file, just require('common') to load common. js file.
6.externals
When we want to require some other class libraries or APIs in the project, but do not want these class libraries The source code is built into runtime files, which is necessary in actual development. At this point we can solve this problem by configuring the externals parameter:
externals: { "jquery": "jQuery" }
So that we can use these APIs in the project with confidence: var jQuery = require("jquery");
7.context
When we require a module, if variables are included in require, like this:
require("./mods/" + name + ".js");
Then in We cannot know the specific module when compiling. But at this time, webpack will also do some analysis work for us:
1. Analysis directory: './mods';
2. Extract the regular expression: '/^.*.js$/';
So at this time, in order to better cooperate with wenpack for compilation, we can give It specifies the path, like done in cake-webpack-config (we ignore the role of abcoption here):
var currentBase = process.cwd(); var context = abcOptions.options.context ? abcOptions.options.context : path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of Tutorial on using webpack.config.js parameters. For more information, please follow 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

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

New feature of PHP5.4 version: How to use callable type hint parameters to accept callable functions or methods Introduction: PHP5.4 version introduces a very convenient new feature - you can use callable type hint parameters to accept callable functions or methods . This new feature allows functions and methods to directly specify the corresponding callable parameters without additional checks and conversions. In this article, we will introduce the use of callable type hints and provide some code examples,

Product parameters refer to the meaning of product attributes. For example, clothing parameters include brand, material, model, size, style, fabric, applicable group, color, etc.; food parameters include brand, weight, material, health license number, applicable group, color, etc.; home appliance parameters include brand, size, color , place of origin, applicable voltage, signal, interface and power, etc.

During the development process, we may encounter such an error message: PHPWarning: in_array()expectsparameter. This error message will appear when using the in_array() function. It may be caused by incorrect parameter passing of the function. Let’s take a look at the solution to this error message. First, you need to clarify the role of the in_array() function: check whether a value exists in the array. The prototype of this function is: in_a

C++ parameter type safety checking ensures that functions only accept values of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.

i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores

Hyperbolic functions are defined using hyperbolas instead of circles and are equivalent to ordinary trigonometric functions. It returns the ratio parameter in the hyperbolic sine function from the supplied angle in radians. But do the opposite, or in other words. If we want to calculate an angle from a hyperbolic sine, we need an inverse hyperbolic trigonometric operation like the hyperbolic inverse sine operation. This course will demonstrate how to use the hyperbolic inverse sine (asinh) function in C++ to calculate angles using the hyperbolic sine value in radians. The hyperbolic arcsine operation follows the following formula -$$\mathrm{sinh^{-1}x\:=\:In(x\:+\:\sqrt{x^2\:+\:1})}, Where\:In\:is\:natural logarithm\:(log_e\:k)

Although large-scale language models (LLM) have strong performance, the number of parameters can easily reach hundreds of billions, and the demand for computing equipment and memory is so large that ordinary companies cannot afford it. Quantization is a common compression operation that sacrifices some model performance in exchange for faster inference speed and less memory requirements by reducing the accuracy of model weights (such as 32 bit to 8 bit). But for LLMs with more than 100 billion parameters, existing compression methods cannot maintain the accuracy of the model, nor can they run efficiently on hardware. Recently, researchers from MIT and NVIDIA jointly proposed a general-purpose post-training quantization (GPQ).

Reference parameters in C++ functions (essentially variable aliases, modifying the reference modifies the original variable) and pointer parameters (storing the memory address of the original variable, modifying the variable by dereferencing the pointer) have different usages when passing and modifying variables. Reference parameters are often used to modify original variables (especially large structures) to avoid copy overhead when passed to constructors or assignment operators. Pointer parameters are used to flexibly point to memory locations, implement dynamic data structures, or pass null pointers to represent optional parameters.
