Webpack Common configuration Item profiles Introduction _javascript Tips

I. Webpack Foundation

1. Generate Package.json in project: Enter NPM init in the project root directory, and enter the appropriate information as prompted. (You can also not generate Package.json files, but Package.json is useful, all recommendations are generated)

2. Install Webpaack

A. Install WEBPACK:NPM install in the global webpack-g

B. Install Webpack to the project and write Webpack to Package.json devdependencies: Go to the Project root directory and enter NPM install Webpack--save-dev on the command line.

3. Packaging module

Webpack <entry> <output>.

<entry> To specify the packaged file, <output> to specify the packaged file.

such as Webpack app/index.js　　　　　　

Build/build.js means to package the Index.js in the app folder into the Build.js in the build folder.

Two. Webpack configuration file Common Configuration item Introduction

1.webpack has a default profile webpack.config.js, this file needs to be created manually, in the project root directory. You can set up multiple profiles for a project, and different profiles have been completed to achieve different functions. How to set up the following introduction.

The 2.webpack configuration file exposes an object in the following format:

Module.exports = {
//configuration item
}

3. Common configuration items will be described

Entry: A packaged entry file, a string, or an object
Output: Configure the results of the package, an object
FileName: Defines the output file name, a string
Path: Defines the output file path, a string
Module: Defines the processing logic for the modules, an object
Loaders: Defines a series of loaders, an array
[
{
Test: Regular expression used to match to the file
Loader/loaders: A string or array that handles files that are matched to. If you need to use only one module loader, use loader:string, and if you want to use multiple module loaders, use the Loaders:array

Include: string or array, refers to the contained folder
Exclude: A string or array, an excluded folder
}
]
Resolve: Affects the parsing of the module, an object
Extensions: auto-complement recognition suffix, is an array

Plugins: Defining Plug-ins, an array

4.entry Detailed description

(1) When entry is a string, this string represents the path of the module that needs to be packaged, and if there is only one module to package, you can use this form

(2) When entry is an object

A. When you are an array, you can use this method when you need to package multiple modules into a single module. If there is no dependency between these modules, the order of the values in the array is not required and, if there is a dependency, put the most dependent module on the last side.
For example: entry:["./app/one.js", ". App/two.js"]

B. An object in the form of a key-value pair, which can be used when you need to package each module separately, for example;

entry:{
Module1: "./app/one.js",
module2:["./app/two.js", "./app/three.js"]
}

Note: When entry is an object of the form of a key value, the package name is the key name, and the filename of output cannot be a fixed value because the name of each package cannot be the same

5.output Detailed description

(1) Output is an object

(2) Output.filename: Specifies the output file name, a string. When outputting a file, Output.filename is a determined string
Such as:

output:{
filename: "Build.js"
}

When outputting multiple files, Output.filename cannot be a determined string. In order for each file to have a unique name, you need to use the following variable

The [name] is replaced by the name of the chunk. Key name corresponding to entry

[Hash] is replaced by the hash of the compilation.

[Chunkhash] is replaced by the hash of the chunk.

Such as:

output:{

path: './build/',

fialname: ' [name].js '

}

(3) Output.path: Specifies the path of the output file, relative path, a string

(4) There are some other values in output, not explained here, you can get more details on the official website of Webpack

6.module.loaders Detailed description

(1) module is an object that defines the processing logic for a module

(2) Module.loaders is an array that defines a series of loaders, each of which is an object

(3) module.loaders:[
{
Test: Regular, used to match the file to be processed
Loader/loaders: String or array, if only one module loader is needed, use loader:string,
If you want to use multiple module loaders, use the Loaders:array
Include: string or array, refers to the contained folder
Exclude: A string or array, an excluded folder
}
]

(4) module can be configured in addition to the loaders can also configure other values, in Webpack's official website to get more information

7.resolve.extensions Detailed description

(1) Resolve.extensions is not necessarily configured, and when not configured, the default value ["", ". Webpack.js", ". Web.js", ". js"] is used. When a value is manually set for resolve.extensions, its default value is overwritten

(2) If you want each module to be parsed correctly according to their own extension, add an empty string to the array.

(3) If you want to request a JS file but do not have an extension when requested (such as: Require (' Somecode ')), then you need to add '. js ' to the array. The same as other files

(4) Resolve has other configuration items to get more information on Webpack's website

8. Supplementing

(1) When the configuration file is set, enter webpack on the command line to package the module according to the configuration item in the default profile.

(2) Set up multiple webpack configuration files. Webpack The default profile is Webpack.config.js, the default is webpack.config.js when you enter webpack on the command line. Enter NPM run on the command line by adding scripts such as "start-html" to Package.json: "Webpack--config webpack.html.config.js" Start-html is looking for the webpack.html.config.js, in this way, different configuration files can be used differently, so that you do not have to repeatedly modify the same configuration file

9. The following is a simple configuration file

Module.exports = {
 entry:{one
 : "./app/one.js",
 Two: "./app/two.js"
 },
 output:{
 path: "./ build/",
 filename:" [name].js "
 },
 module:{
 loaders:[
 {
 test:/.*\.css$/,
 loaders : ["Style", "CSS"],
 exclude: './node_modules/'
 }
 ]
 },
 resolve:{
 extensions:[', '. CSS ', '. js ', ' JSX ']
 }
}; 

Three. Webpack-dev-server

1.webpack-dev-server is a lightweight server, modify the file source code, automatically refresh the page will be modified to sync to the page

2. Install Webpack-dev-server:
Global installation: NPM install Webpack-dev-server-g
To install and write dependencies in Package.json files in a project: NPM install Webpack-dev-server--save-dev

3. Use command webpack-dev-server--hot--inline complete automatic refresh

4. The default port number is 8080, if you need 8080 ports to be used, you need to change the port, Webpack-dev-server--port 3000 (change the port number to 3000)

5. After installing Webpack-dev-server, you can enter webpack-dev-server on the command line and enter localhost in the browser address bar: port number, You can open the index.html file in the project root in the browser, and if there is no index.html file in the project root directory, all folders in the project root directory are listed in the browser.

6. The fifth article only starts the service not to be able to automatically refresh, wants the automatic refresh to need to use to Webpack-dev-server--hot--inline

7. When using the Webpack-dev-server--hot--inline command, each time the file is modified, the file is packaged and saved in memory and is not written on the disk (default is to pack the file according to Webpack.config.js, through--config Xxxx.js modified), this packaged file and the index.html at the project root are at the same level (but you can't see it because it's not in memory). Save packaged files to disk using the Webpack command

For example, the introduction of Webpack-dev-server--hot--inline packaged in the index.html file build.js
　　　<script src= "Build.js" ></script>

Introduce build.js packaged by Webpack command in the index.html file
　　　　<script src= "./build/build.js" ></script>

8. Every time a long string of commands is too troublesome to add a configuration to the scripts configuration of the Package.json file in the project's root directory, such as "Build": "Webpack-dev-server--hot--inline", and then enter NPM at the command line The run build can replace the input of a long series of commands (Webpack-dev-server--hot--inline), run Webpack-dev-server--hot--inline by default is to find Webpack.config.js, You can modify the--config command to another configuration file. For example:

Webpack-dev-server--hot--inline--config ' webpack.es6.config.js '

9. Configuring the root directory

(1) When you enter Webpack-dev-server--hot--inline in the command line, and then enter localhost: port number in the browser, the browser will find the content in the root directory of the project, and the root directory can be configured through--content-base.

such as Webpack-dev-server--hot--inline--content-base './build/', Load index.html in the build folder, and if there is no index.html file, the files and folders in all the build directories will be displayed in the browser

Four. Examples

I have a set of two webpack configuration files are webpack.config.js and webpack.react.config.js respectively. The contents of the Scripts object in the Package.json file are as follows:

"Scripts": {
"test": "Echo \" Error:no test specified\ "&& exit 1",
"react": "Webpack--config Webpack . React.config.js ", Build
": "Webpack-dev-server--hot--inline--content-base./build/",
"build-react": " Webpack-dev-server--hot--inline--content-base./react-build/--config webpack.react.config.js "
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.