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

Source: Internet
Author: User
Tags webpack tutorial

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.