Webpack Basic +webpack Profile Common configuration Item Introduction +webpack-dev-server

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

2. Installing Webpaack

A. Installing WEBPACK:NPM install WEBPACK-G in the global

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

3. Packaging module

Webpack <entry> <output>. <entry> Specifies the packaged file,<output> used to specify the packaged file. such as Webpack app/index.js build/build.js means that the Index.js in the app folder is packaged in 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 you have reached different profiles to accomplish different functions. How to set up the following introduction.

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

Module.exports = {
Configuration Items
}

3. Common configuration items will be described

Entry: Packaged entry file, a string or an object
Output: Configure the result 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 module, 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 matching files. If only one module loader is needed, use the

Loader:string, if you want to use more than one module loader, use Loaders:array

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

Plugins: Defines a plug-in, 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 be packaged, you can use this
Form

(2) When entry is an object
A. When an array is used, 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 array
The order of the values is not required, and if there is a dependency, the most dependent module is placed on the last side.
Example: entry:["./app/one.js", ". App/two.js"]
B. The object that is a key-value pair is that you can use this method when you need to package it separately into multiple modules, for example;
entry:{
Module1: "./app/one.js",
module2:["./app/two.js", "./app/three.js"]
}
Note: When entry is an object of a key-value pair, the package name is the key name, and the output filename cannot be a fixed value because each package's
The name can't 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 definite string
such as: output:{
FileName: "Build.js"
}
When outputting multiple files, Output.filename cannot be a deterministic string. In order to have a unique name for each file, you need to use the following
The variable
[name] is replaced by the name of the chunk. Corresponding entry key Name

[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 the 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 the module
(2) Module.loaders is an array that defines a series of loaders, and each item in the array 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 more than one module loader, use the Loaders:array
Include: A string or an array that refers to the contained folder
Exclude: A string or array that refers to an excluded folder
}
]
(4) module can be configured in addition to the loaders can also configure other values, in Webpack's official website to obtain more information

7.resolve.extensions Detailed description

(1) Resolve.extensions does not have to be configured, when not configured, the default value is used
["", ". Webpack.js", ". Web.js", ". js"], when manually setting a value for Resolve.extensions,
Its default value will be overwritten.
(2) If you want each module to be parsed correctly by their own extension, add an empty string to the array.
(3) If you want to request a JS file but do not have the extension when requested (such as: Require (' Somecode ')), then you need to
Add '. js ' to the array. The same as other files
(4) Resolve also has other configuration items, get more information on Webpack's website.

8. Supplement

(1) After setting up the configuration file, 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 configuration file is Webpack.config.js, and when you enter webpack on the command line, the default is to find Webpack.config.js. By adding an example in the scripts of Package.json
"start-html": "Webpack--config webpack.html.config.js"
In the command line, enter NPM run start-html to find the webpack.html.config.js, in this way you can achieve a different
Profiles have different uses, so you don't have to modify the same configuration file over and over again

9. Here is a simple configuration file

　　

Module.exports = {    entry:{one        : "./app/one.js", and ".        /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, after modifying the file source, automatically refresh the page to synchronize the changes to the page

2. Install Webpack-dev-server:
Global installation: NPM install Webpack-dev-server-g
Install in the project and write dependencies in the Package.json file: npm install Webpack-dev-server--save-dev

3. Use the command webpack-dev-server--hot--inline to complete automatic refresh
4. The default port number is 8080, if 8080 ports need to be occupied, 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 to open the service, and then in the browser address bar
Enter the localhost: port number to open the index.html file of the project root in the browser if there is no index.html in the project root directory
File, all the folders in the project root directory are listed in the browser.
6. Fifth just start the service does not automatically refresh, to automatically refresh the need to use the Webpack-dev-server--hot--inline

7. When you use the Webpack-dev-server--hot--inline command, each time you modify a file, the file is packaged
Saved in memory and not written on disk (by default, according to Webpack.config.js packaging files, through the--config xxxx.js modified), this package of the resulting files
The index.html at the same level as the project root (but you can't see it because
It is not in memory in the disk). Save the packaged file on disk using the Webpack command
For example, in the index.html file, the build.js that is packaged by Webpack-dev-server--hot--inline is introduced
<script src= "Build.js" ></script>
Introducing Build.js packaged with the Webpack command in the index.html file
<script src= "./build/build.js" ></script>

8. Each time you knock a long list of commands too cumbersome to add configuration in the scripts configuration of the Package.json file in the project root directory, such as
"Build": "Webpack-dev-server--hot--inline", then enter NPM run build on the command line to
Instead of entering a long list of commands (Webpack-dev-server--hot--inline), run Webpack-dev-server--hot--inline default is to find Webpack.config.js, via--config command Can be modified to another configuration file. Example: Webpack-dev-server--hot--inline--config ' webpack.es6.config.js '

9. Configure the root directory

(1) When you enter Webpack-dev-server--hot--inline on the command line, and then enter localhost: port number in the browser, the browser will

root directory to find content, the root directory can be configured through--content-base.

such as Webpack-dev-server--hot--inline--content-base './build/', in the build folder to load index.html, if not

index.html file, the files and folders in all the build directories will be displayed in the browser

Four. Example

I set up a configuration file for two webpack, respectively, Webpack.config.js and Webpack.react.config.js. 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 " } 

　　

Webpack Basic +webpack Profile Common configuration Item Introduction +webpack-dev-server