Home Web Front-end JS Tutorial Tutorial on using webpack.config.js parameters

Tutorial on using webpack.config.js parameters

Jun 15, 2018 pm 02:36 PM
parameter

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()
 ]
};
Copy after login

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'
Copy after login

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'
Copy after login

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'
 }
Copy after login

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'
 }
Copy after login

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'}
 ]
}
Copy after login

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'}
Copy after login

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');
Copy after login

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"
 }
Copy after login

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']
 }
Copy after login

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"
 }
Copy after login

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");
Copy after login

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);
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

New feature in PHP version 5.4: How to use callable type hint parameters to accept callable functions or methods New feature in PHP version 5.4: How to use callable type hint parameters to accept callable functions or methods Jul 29, 2023 pm 09:19 PM

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,

What do product parameters mean? What do product parameters mean? Jul 05, 2023 am 11:13 AM

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.

PHP Warning: Solution to in_array() expects parameter PHP Warning: Solution to in_array() expects parameter Jun 22, 2023 pm 11:52 PM

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++ function parameter type safety check C++ function parameter type safety check Apr 19, 2024 pm 12:00 PM

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 parameter evaluation list i9-12900H parameter evaluation list Feb 23, 2024 am 09:25 AM

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

C++ program to find the value of the inverse hyperbolic sine function taking a given value as argument C++ program to find the value of the inverse hyperbolic sine function taking a given value as argument Sep 17, 2023 am 10:49 AM

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)

Can't a language model with 10 billion parameters run? A Chinese doctor from MIT proposed SmoothQuant quantification, which reduced memory requirements by half and increased speed by 1.56 times! Can't a language model with 10 billion parameters run? A Chinese doctor from MIT proposed SmoothQuant quantification, which reduced memory requirements by half and increased speed by 1.56 times! Apr 13, 2023 am 09:31 AM

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).

Advanced usage of reference parameters and pointer parameters in C++ functions Advanced usage of reference parameters and pointer parameters in C++ functions Apr 21, 2024 am 09:39 AM

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.

See all articles