By Ylise
1. Install webpack
Reference documents:
1. Create folder mkdir webpack-demo and enter the created folder
mkdir webpack-demo && cd webpack-demo
2. Initialize a new package.json file and use NPM init-y to skip the query phase. Next, use domestic mirror cnpm to install webpack scaffolding (npm is too slow to install, for the sake of efficiency, domestic mirror is used below).
Interview:
npm init
npm init is used to initialize and generate a new package.json file. It asks users a series of questions. If you don't think you need to change the default configuration, you can go all the way back.
If - f (for force) and - y (for yes) are used, the question phase is skipped and a new package.json file is generated directly.
The install command can use different parameters to specify the nature of the dependencies that the installed module belongs to, that is, in which item of the packages.json file appears.
save: The module name will be added to dependencies, which can be simplified to a parameter - S.
save-dev: The module name will be added to devDependencies, which can be simplified to parameter-D.
$ npm init -y Wrote to D:\webpack\package.json: { "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
cnpm install webpack webpack-cli --save-dev
3. View directory structure ls-l
ls -l
4. Next, install a tutorial drill according to the Chinese document of webpack. The directory structure src, src/index.js and index.html are created in the current folder. The content of the file is copied directly from the document. Finally, package.json is modified according to the document to change the package to private, remove the entries, and prevent accidental publication.
index.js:
function component() { var element = document.createElement('div'); // Lodash (currently introduced through a script script script) is necessary to execute this line //Output => Hello webpack, refer specifically to Lodash documentation element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
index.html:
<!doctype html> <html> <head> <title>start</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./src/index.js"></script> </body> </html>
package.json:
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "privete": true,//Change the package to private, remove entries, and prevent accidental publication. "main": "index.js" (entry file) "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.36.1", "webpack-cli": "^3.3.6" }, "dependencies": { "lodash": "^4.17.15" } }
5. Description of sample questions.
Description of the example in webpack Chinese document:
In this example, there is an implicit dependency between < script > tags. Before the index.js file is executed, it also depends on the lodash introduced in the page. It is implicit because index.js does not explicitly state that lodash needs to be introduced, but assumes that there is already a global variable.
There are some problems with managing JavaScript projects in this way:
- Not immediately, script execution depends on external libraries.
- If dependencies do not exist or sequence errors are introduced, the application will not run properly.
- If dependencies are introduced but not used, browsers will be forced to download useless code.
Let's use webpack to manage these scripts.
2. Create bundle files according to documents
1. Adjusting directory structure
Separate the source code (/ src) from our distribution code (/ dist). Source code is code for writing and editing. Distribution code is the "output" directory generated by the construction process after minimization and optimization, which will eventually be loaded in the browser.
webpack-demo |- package.json |- /dist |- index.html |- /src |- index.js
2. To package lodash dependencies in index.js, we need to install libraries locally. Execute cnpm install --save lodash.
cmd:
$ cnpm install --save lodash √ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts Recently updated (since 2019-07-12): 1 packages (detail see file D:\webpack\webpack-demo\node_modules\.recently_updates.txt) Today: → lodash@*(4.17.15) (10:28:46) √ All packages installed (1 packages installed from npm registry, used 509ms(network 505ms), speed 12.51kB/s, json 1(6.32kB), tarball 0B)
dist/index.js:
import _ from 'lodash'//Additional function component() { var element = document.createElement('div'); // Lodash (currently introduced through a script script script) is necessary to execute this line //Output => Hello webpack, refer specifically to Lodash documentation element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
src/index.html:
<!doctype html> <html> <head> <title>start</title> <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> --> </head> <body> <!-- <script src="./src/index.js"></script> --> <script src="main.js"></script> </body> </html>
cmd:
$ npx webpack Hash: 01e246061d692c96839a Version: webpack 4.36.1 Time: 2044ms Built at: 2019-07-19 21:32:22 Asset Size Chunks Chunk Names main.js 70.5 KiB 0 [emitted] main Entrypoint main = main.js [1] ./src/index.js 313 bytes {0} [built] [2] (webpack)/buildin/global.js 472 bytes {0} [built] [3] (webpack)/buildin/module.js 497 bytes {0} [built] + 1 hidden module WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
chrome(index.html):
Interview:
Update the index.html file. Because lodash is now introduced through import, delete lodash < script > and then modify another < script > tag to load bundle s instead of the original / src file.
In this setting, index.js explicitly requires that the introduced lodash must exist, and then binds it to (no global scope pollution). By declaring the dependencies required by the module, webpack can use this information to build the dependency graph, and then use the graph to generate an optimized bundle that will be executed in the correct order.
It can be said that executing npx webpack will take our script as the entry starting point and then output it as main.js. The npx command provided by Node 8.2 + version can run the webpack binary file (. / node_modules/.bin/webpack) of the initial installed webpack package.
3. Summary
Web pack is designed to avoid the problem of implicit dependency. It uses engineering to build dependency graphs and optimizes them. Finally, the required dependencies will be bundled in the main.js file.