Webpack Front-End build Tool Learning Summary (iii) of the Webpack.config.js configuration file

Webpack can also be executed with the specified configuration file, in addition to passing parameters at the command line. By default, the file for the current directory webpack.config.js is searched, which is a node. JS module that returns a JSON-formatted configuration information object, or a --config configuration file with the option to specify it.

Webpack Document: https://webpack.github.io/docs/

1. Create a new folder SRC store the pre-packaged source files, Dist folder to store the packaged files, create a new webpack.config.js webpack configuration file

Contents of the folder before packaging

2. Create a new index1.html reference dist under the packaging of JS

3. Input command: Webpack, can be compiled according to the configuration item in Webpack.config.js

4. Compile the file directory and content as follows

5. If Webpack.config.js is renamed to Webpack.dev.config.js, the default Webpack command will not be found and the configuration file needs to be specified with the--config option of Webpack

Command: Webpack--config webpack.dev.config.js

6. If you want to see the progress of the compilation, such as packaged modules, you can specify the value of the Webpack property within the scripts tag in Package.json

7. Input command: NPM run Webpack, to compile the package

Detailed description of the entry value in Webpack.config.js:

Https://webpack.github.io/docs/configuration.html#entry

The value of the entry can be a string of type or an array, or it can be a JSON object

Array: This will package the contents of the file in the array defined by entry into this file defined in the output

JSON object: This situation is suitable for multi-page compilation

Description of the Output property value: Https://webpack.github.io/docs/configuration.html#output

Using the command: NPM run Webpack, compiling the package will see that two files are generated under DIST/JS

Webpack Front-End build Tool Learning Summary (iii) of the Webpack.config.js configuration file