Webpack Basic Use

First, the concept

① Essentially, Webpack is a static module wrapper for a modern JavaScript application (module bundler)

② when Webpack processes an application, it constructs a dependency graph recursively (dependency graph) that contains each module that the application requires, and then packages all of them into one or more bundles

③ Reference Document: Webpack Chinese document

Second, basic use

1. Output Hello World

① Global Installation

Install--global Webpack

② Preparing the directory structure

③ command line to execute packaging instructions: A bundle.js file will be added to the SRC folder

Webpack Main.js Bundle.js

④ Open See index.html file, console output Hello World

    <!---    <!---    <  src = "Src/bundle.js" " ></ Script >

2. Optimization (specification)

① re-partition the directory structure: in order to partition the directory structure more clearly, the project source code and packaging results are divided into the following, the source is stored in the SRC directory, the packaging results stored in the Dist directory (if not this directory will be automatically created)

Basic configuration of ② configuration file Webpack.config.js

 //  The file is ultimately the  const path to be executed in the node environment = Require (' path '  //  Export an object with a special property configuration  module.exports = {entry:  ' ./src/main.js ', /*   Portal file module path  */  output:{Path:path.join (__dirname,  './dist/'), /*   export file module belongs to directory, must be an absolute path  */  filename:  ' bundle.js ' /*   packaged result file name  */ }}  

③ command Line Execution Packaging instructions: Webpack automatically reads webpack.config.js as the default profile, or you can specify the configuration file by manually--config parameters

Webpack

3, the Local installation method (recommended)

① Global Installation Issues: Install the Webpack version on the developer's computer when the global Webpack is packaged, and if it is on someone else's computer, there may be some compatibility issues with the Webpack version inconsistency

② the benefits of a local installation: Install Webpack on a local project so that the Webpack packaging tool will move with the project file and there will be no compatibility issues. Install Webpack into development dependency (--save-dev), because Webpack is a packaging tool, if the project needs to be online, on-line is the result of packaging, rather than this tool, so in order to differentiate core package dependencies and development tools rely on, through--save and-- Save-dev to differentiate

③ Local Installation: The project file needs to be initialized before installation, and if it is more than WEBPACK4, you will need to install WEBPACK-CLI (this tool is used to run Webpack on the command line)

Init-  yinstall webpack webpack  -cli--save-dev

④ locally installed configuration (scripts in configuration file Package.json, equivalent to alias-build)

{  "name": "Webpackdemo",  "version": "1.0.0",  "description": "",  "main": "Webpack.config.js",  "Scripts": {    "Build": "Webpack"   },  "keywords": [],  "author": "",  "license": "ISC",  "Devdependencies": {    "webpack": "^4.16.3",    "webpack-cli": "^3.1.0"   }}

⑤ Command line Execution Package command

Run Build

⑥ add: If you want to automatically package after each file modification, you can configure the scripts in the Package.json

{  "name": "Webpackdemo",  "version": "1.0.0",  "description": "",  "main": "Webpack.config.js",  "Scripts": {    "build": "Webpack",     " watch-build": "Webpack--watch"   },  " Keywords ": [],  " author ":" ",  " license ":" ISC ",  " Devdependencies " : {    "webpack": "^4.16.3",    "webpack-cli": "^3.1.0"  }}

Webpack-build

Webpack Basic Use