Webpack Basic Packaging configuration process

Project construction and Webpack package configuration process

1. Create folder EC (folder and file name customized according to requirements)
2. Create a new Folder app under the EC folder
3. Create a new portal file under the app folder Index.js and the index.html file that runs the portal file
4. Create a new two JS file under the App folder: A,js b.js (when project level such as React project, can be created according to the requirements of components folder, etc., for better management of modular projects)

App/index.html

<! DOCTYPE html>
App/index.js (ES6 syntax)
Import a from './a.js'./b.js '; a (); B ();
App/a.js (ES6 syntax)
default function A () {    console.log (' module A ');}
App/b.js (ES6 syntax)
default function B () {    console.log (' module B ');}
The error in running the app/index.html console in the browser is that the browser does not support ES6 's modular syntax so use Webpack, followed by the 4th step above:
 
 

  
  
 
   
 Create a new Webpack.config.js file under EC (Webpack run with NPM and run Webpack with NPM, the default is to run the Webpack.config.js file) 
 The 
   
 
    
 Webpack uses COMMONJS to modularize the syntax, which is the NPM syntax, without ES6 syntax, because Webpack is running with NPM. 
 
   
 
  
 
 
Const PATH = require (' path '= {    './app/index.js ',                     // definition (tell webpack) Portal file Output     : {        // defines the name of the folder to be stored in the export file, where an absolute path is required, so start by introducing path, using the path method        filename: ' [ Name].js '                    // output file name definition, so write default is main.js    //    filename: ' index.js ' can also be set to Index.js    }}

 
 

  
  
 
   
Formally install the Webpack in the project (under the EC folder) (provided the Nodejs is installed and the version is newer)
 
   
 
    
NPM init-y (-y means Yes is installed by default, Package.json files are automatically created in the project)
 
    
NPM Install--save-dev webpack (--save-dev indicates that it is not installed in the project and installed in dev environment developer)
 
    
Manually configuring the Package.json file
 
   
 
  
 
 
{  "Name": "E_c",//This remember to change the name to a different name from the EC."Version": "1.0.0",  "description": "",  "Main": "Webpack.config.js",  "Scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",    "Dev": "Webpack"//This is a webpack that needs to be manually configured  },  "Author": "",  "License": "ISC",  "Devdependencies": {    "Webpack": "^3.10.0"//This is a development dependency, automatically configured when NPM install--save-dev webpack  }}

 
 

  
  
 
   
In the EC directory, open the console and enter NPM run dev
 
   
 
    
 
    
The Dist folder is automatically generated under the Project EC folder and the portal file defined in the Webpack.config.js file is output to the Dist folder and named as the output file name defined in Webpack.config.js
 
    
Copy the app/index.html copy to the Dist folder to run Main.js (or other custom) generated by Webpack packaging under the Dist folder.
 
    
At this point in the browser open the Dist folder under the Index.html console as follows:
 
   
 
  
 
 

 
 

  
  
 
   
The final folder is as follows:
 
  
 
 
Webpack Basic Packaging configuration process