One ,webpack Use of :

Project structure :

src: Source code

dist: Packaged files , Files for publishing (bundle.js It's the packaged file , And then in the index.html Just quote )

with cmd Package the project :

Pack it up , In the project dist Directory will generate a package file bundle.js file , Call this on the run page js file , Operation results :

PS: Just wrap the entry function ( Just packing main.js), Other dependent classes are automatically packaged

There are two development models CommonJS,ES6 Two kinds of modular development :


quote :

Operation after repackaging :

Two ,webpack.config.js Configuration and package.json :

In the configuration file , need node.js The environment of , Initialize the environment in the directory of the item :npm init, generate package.json configuration file

generate package.json:

PS:"license": "ISC" If it's not open source , You can delete the sentence .

Installation dependency :npm install

webpack.config.js to configure : After the outlet and inlet are configured , In the project directory , Direct input webpack You can pack it , The path of some files is omitted , Because the paths are configured in this file :

npm run build = webpack Equal to each other , Custom start command :

Run and test successful :

Three , Partial installation webpack
: Configure the project webpack The environment of , When packing , The environment of the project will be found first , If you don't find it, you will find the environment of the system , Normally , Projects are packaged in their own environment , Install with development time dependencies :cnpm
install webpack@3.6.0 --save-dev

After partial installation , stay idea Terminal execution of npm run build
This is the project's webpack Environmental Science , Local priority webpack Environmental Science , If so, the global variable will not be called webpack; Otherwise, the global variable will be called webpack Environmental Science .


©2020 ioDraw All rights reserved
PHP call shell command Notes on core principles of reverse engineering ( One )——Hello World-1Python Student information management system ( Lite ) Sharing a script of hacker empire code rain , Simple and fun ! Ctrip 2019 School recruitment LRU Cache Advanced programmer - Deep understanding of data structure python calculation macd Methods mac solve Enter passphrase for key Enter the password each time Beginner's GuideWeekly planning mind map template