Webpack Basic Summary

First, installation and configuration Webpack

1. Global Installation Webpack

This installs the Webpack and can then be webpack-v to see if the installation is successful.

2, first create the project directory structure, the root directory is mywebpack. Enter the project root directory, execute: NPM init, generate Package.json file, the content is a bunch of JSON data, basically is the information entered in the terminal.

3, enter the project root directory of the local installation Webpack, enter./mywebpack, execute:npm install Webpack--save-dev, Local installation Webpack succeeded, a node_ will appear under the root directory Modules folder.

In the future, the various dependencies that we install through NPM in the root directory will be installed by default under this folder.

Then, webpack-v can view the Webpack version, or enter the node interaction environment, require ("Webpack") to see if it can get to Webpack

Now that the Webpack framework for our project is ready, then we'll use it to deal with everything.

4, enter the root directory, build two folders, respectively, SRC and dist

(1) SRC folder: Used to store the JavaScript code we write, can be easily understood as a module written in JavaScript.

(2) Dist folder: Used to store files for the browser to read, this is Webpack packaged files.

Create a index.html file under Dist and write the following code

<! DOCTYPE html>"en">  "  utf-8">    <title>webpack Sample project</title>  'root'>    </div>    <script src= " Bundle.js "></script>  </body>

The bundle.js introduced here can be used regardless, this file is not yet, this is the file generated after packaging with Webpack

SRC to build a index.js file, write the code:

document.write ("It works. ");

5. Create a new Webpack.config.js file in the root directory and start the configuration:

ConstPath = require ('Path'); Module.exports={    //configuration entries for portal filesentry:{Entry:'./src/index.js'    },    //configuration items for export filesoutput:{//The path of the output, using the node syntaxPath:path.resolve (__dirname,'Dist'),        //the file name of the outputFileName'Bundle.js'}, Mode:"Development",//Note The latest version must be added mode, otherwise it will be error//modules: such as interpreting CSS, how images are converted, compressedmodule:{},//plugins for the production of templates and functionsplugins:[],//Configuring the Webpack development Services featuredevserver:{}}

6, then in the terminal input: Webpack, packaging, then we can see in the disc directory bundle.js files packaged production, and successfully run index.html files.

Note: The above mode item must be added in the latest version, otherwise you will be reported the following error

Second, Multi-entry, multi-outlet configuration

ConstPath = require ('Path'); Module.exports={    //configuration entries for portal filesentry:{entry: './src/index.js ', Entry2: './src/greeter.js '},//configuration items for export filesoutput:{//The path of the output, using the node syntaxPath:path.resolve (__dirname,'Dist'),        //the file name of the outputFileName'[Name].js'}, Mode:"Development",    //modules: such as interpreting CSS, how images are converted, compressedmodule:{},//plugins for the production of templates and functionsplugins:[],//Configuring the Webpack development Services featuredevserver:{}}

In the portal file, a new Entry.js entry file is added, this file needs to be created manually, the filename of the export file, we changed the original bundle.js to [name].js

[name] means that, depending on the name of the portal file, it is packaged into the same name, with several portal files, and several files can be packaged.

Package in Terminal input Webpack

Webpack Basic Summary