First, we think so few questions:
1. Why do we use webpack?
2. What is webpack?
3.webpack the emergence of what can help us solve the problem?
I want to understand these three questions probably will be able to get to know webpack what is it? Now I set out from two angles, to discuss the benefits of webpack.
1. During the past development model:
1.1 the most primitive process-oriented development:
Js rendering using three parts of the page: header, sidebar, content.
html code:
js code:
effect:
Features: Very limited ability of early js can do things is limited, we js code into a file to make it happen; As shown above,
But when the code is more than one, it is difficult to maintain.
1.2: Object-oriented development:
The same is to achieve the above functions:
html code:
js code:
Features:
1. When introducing resources of each js be introduced once every introduction of a multi-js file is an HTTP request, when too many resources, easily lead to slow page loads.
2. The order of introduction of resource required, such as the above index.js otherwise it will be sure to put the final error, but not which lines correspond to which js file in the file index.js seen, but bad location positioning error it is not easy to maintain.
3. The directory structure is not clear, can not know index.js Header, Sidebar, Content file was located position.
Acquaintance webpack:
1. coarse talk webpack installation:
1.1 Creating package.json file: npm init prompts to confirm.
1.2 execute: npm install webpack-cli --save-dev
1.3 execution npx webpack index.js (meaning with webpack translation index.js)
Of course, this index.js have to be changed here
引入生成dist文件中的mian.js，这是打包好的运行效果如下:
Webpack 的核心概念是一个 模块打包工具 ，它的主要目标是将js文件打包在一起，打包后的文件用于在浏览器中使用，但它也能胜任 转换(transform) 、打包(bundle) 或 包裹(package) 任何其他资源。
作者：曹增
链接：https://www.jianshu.com/p/b694a78d4615
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。