[Html]webpack Web Development Packaging tools

Official Document: https://webpack.js.org/concepts/

English Document: https://doc.webpack-china.org/guides/installation/

Brief introduction to the book: http://www.jianshu.com/p/42e11515c10f

What is Webpack

Webpack can be seen as a modular baler: The thing it does is to analyze your project structure, find JavaScript modules and other extension languages (Scss,typescript, etc.) that the browser cannot run directly, and convert and package them into the appropriate format for the browser to use

Pre-installing node. js

Official installation:

// Global Installation  Install-g webpack// installs to your project directory  install--save-dev webpack

Before formal use:

1. Locate when a test directory starts the project:

NPM Init

Build a JSON file

2. Installing Webpack as a dependency package

// Installing Webpack Install --save-dev webpack

3. Go back to the empty folder and create two folders in it, app folder and public folder, app folder to store raw data and JavaScript module we will write, The public folder is used to store files that are then read by the browser (including the JS file generated using Webpack packaging and aindex.htmlfiles). Next we create three more files:

Brief translation:

Understanding Webpack only needs to know this four steps:

Entry

Output

Loaders,

Plugins

[Html]webpack Web Development Packaging tools