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 [email protected] --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
Daily Recommendation