[JS Master's Road] Webpack Tutorial Series 2-configuration file Webpack.config.js detailed

Next, create a new project folder Demo2 under the Webpack folder, then initialize the project's Package.json profile with NPM init--yes and install Webpack (NPM install [email protected ]--save-dev, and then create a basic project folder structure, well, one of our basic project structures is built.

First, start configuring our Webpack project with the Webpack.config.js file

First, in the project folder Demo2, create a new Webpack.config.js file, this webpack.config.js file simplifies command line operations, the main configuration Webpack four core: entry (project portal), output ( Output path) loaders (load loader), and plugins (plug-in use), the official website has detailed configuration instructions: https://webpack.js.org/concepts/. So what is entry (entrance), the first file to be executed when the project is run, called the Portal file

Webpack.config.js file:

1Console.log (__dirname);//D:\ghostWu\bak\webpack\demo22Module.exports = {3Entry: './src/js/main.js ',//Entry File4 output: {5         //__dirname, which is the absolute path where the current Webpack.config.js file resides6Path: __dirname + '/dist ',//output path, to use absolute path7FileName: ' Index.bundle.js '//file name of the output after packaging8     }9};

After the configuration file is written, execute the webpack Package command and go to the current directory to find the Webpack.config.js file and package the Main.js file to dist/ Index.bundle.js, if main.js enter the following code, then execute Webpack package once

1 function say () {2     alert (' Ghostwu tells you how to learn Webpack ' ); 3 }4 say ();

Then in the index.html file through <script src= "./dist/index.bundle.js" ></script> introduce the packaged file, then the contents of the say function will pop up

Second, if the configuration file Webpack.config.js is modified to another name (such as Webpack.dev.config.js), the execution of the Webpack Packaging command, is not properly packaged (command line prompt, the configuration file cannot be found), so you need to package the time, --CONFIG Specifies the name of the configuration file (webpack--config webpack.dev.config.js) to pack properly

Third, through the script section of the Package.json file, simplify the packaging operations

Modify the scripts part of the Package.json file to:

"Scripts": {"D": "Webpack--config webpack.dev.config.js--progress--display-modules--colors--display-reasons"}, D, if you don't understand, please take a look here.

Then use npm run D on the command line to execute the command for the "D" Item scripts added.

[JS Master's Road] Webpack Tutorial Series 2-configuration file Webpack.config.js detailed