1. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。
2. 它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件，同时支持CommonJS和AMD格式。
3. 它与众不同的是，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，从而让我们可以将CSS、模板，
甚至是自定义的文件格式当做JavaScript模块来使用。
4. Webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、
根据图片大小决定是否用base64内联、开发时的模块热替换等等，可以说是目前前端构建领域最有竞争力的解决方案之一。
- 首先安装Webpack
$ npm i -g webpack webpack或者
$ npm install webpack webpack这里加上-g 是表示全局安装，可以直接在终端输入webpack命令运行，不加-g则安装在当前目录下，两种安装方式各有优点：全局安装的好处是一次安装，到处可以用。局部安装的好处是程序调用快一点点。推荐全局安装，这样方便我们练习。
- Entry file
- Multiple entry files
- Babel-loader
- CSS-loader
- Image loader
- CSS Module
- UglifyJs Plugin
- HTML Webpack Plugin and Open Browser Webpack Plugin
- Environment flags
- Code splitting
- Code splitting with bundle-loader
- Common chunk
- Vendor chunk
- Exposing Global Variables
- Hot Module Replacement
- React router
Demo01: Entry file (source)
Entry file is a file which Webpack will read to build bundle.js.
For example, main.js is an entry file.
// main.js
document.write('<h1>Hello World</h1>');index.html
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>Webpack follows webpack.config.js to build bundle.js.
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};Launch the server, visit http://127.0.0.1:8080 .
$ webpack-dev-server
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent