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 :

ES6:

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 .

 

Technology