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
python gui Interface examples -Python GUI Programming complete example vue element-ui Drop down menu with search algorithm : Longest common subsequence ( Output all longest common subsequences ) First knowledge Mongdb Data query ( three ) The problem of time type conversion “2021-01-20T10:09:11Z” Morphological processing gradient , Top hat , Black hat mean value - Implementation and application of variance model _python_ Data analysis _9 Wechat small program student course selection system app Design CCF A series of questions --2016 year 4 Month 1 Calculation of break point laravel The first mock exam is based on the "one to many" model. with,has,wherehas