webpack是JS应用的静态模块打包工具。webpack在处理你的应用时，会递归的构建依赖项，这些依赖项包括你的应用所需要的所有模块，然后把这些模块打包到一个或多个bundles中。
一、Entry
entry point是项目的入口文件，告诉webpack从哪个模块开始构建内部依赖。进入入口文件后，webpack会直接或间接的找到其依赖的模块和库。
1、定义入口的方式有多种：
1）简写形式（string | array<string>）
module.exports = { entry: ‘./path/to/my/entry/file.js‘ } module.exports = { entry: { main: ‘./path/to/my/entry/file.js‘ } }
上面的写法实际上是下面写法的简写形式
multi-main entry: entry是一个存放文件路径的数组，当你需要将多个依赖文件一起注入并将它们的依赖关系打包成一个chunk时，可以使用这种方式。
2）对象形式（{ [entryChunkName]: string|array<string> }）
const config = { entry: { app: ‘./src/app.js‘, vendors: ‘./src/vendors.js‘ } }
2、应用场景
1）分离app和vendor入口
const config = { entry: { app: ‘./src/app.js‘, vendors: ‘./src/vendors.js‘ } }
这种形式告诉webpack从app.js和vendors.js开始创建分离的相互独立的依赖。这在单页面应用中很常用。这种设置允许你利用CommonsChunkPlugin将应用中任何vendor的引用抽离到vendor bundle. 这样在你的应用bundle中就没有vendor代码。
2）多页面应用
const config = { entry: { pageOne: ‘./src/pageOne/index.js‘, pageTwo: ‘./src/pageTwo/index.js‘, pageThree: ‘./src/pageThree/index.js‘ } };
这种设置方式告诉webpack我们有3个分离的依赖项。在多页面应用中，服务器需要获取新的HTML文档，页面重新加载新的文档和文件需要重新下载，这样我们就可以可以使用CommonsChunkPlugin将页面间共享的代码提取打包。
黄金条例：每个HTML文档使用一个入口。
二、Output
output属性告诉webpack打包文件的输出位置和名字。 output是一个对象，一般需要文件名（filename）和输出路径(path);
const path = require(‘path‘); module.exports = { entry: ‘./path/to/my/entry/file.js‘, output: { path: path.resolve(__dirname, ‘dist‘), filename: ‘my-first-webpack.bundle.js‘ } };
1、多入口文件
当你的设置会有多个chunk（比如多个入口文件或者使用类似CommonsChunkPlugin），但你需要保证每个文件都有唯一的名字。
{ entry: { app: ‘./src/app.js‘, search: ‘./src/search.js‘ }, output: { filename: ‘[name].js‘, path: __dirname + ‘/dist‘ } }
2、publicPath
当你将应用所需文件存放在CDN或者hash时
output: { path: "/home/proj/cdn/assets/[hash]", publicPath: "http://cdn.example.com/assets/[hash]/" }
如果编译时不确定最终的publicPath,这个值可以设为空白或者不设置，然后在入口文件中使用__webpack_public_path__动态设置。
__webpack_public_path__ = myRuntimePublicPath // rest of your application entry
三、Loaders
loaders可以帮助webpack处理更多类型的文件，不仅限于javascript（webpack自身只能处理JS）。loaders会将各种类型的文件转化为webpack能处理的合法模块。
1、使用方式
1） 配置文件
const path = require(‘path‘); module.exports = { entry: ‘./path/file.js‘, output:{ path: path.resolve(__dirname,‘dist‘), filename:‘bundle.js‘, }, modules:{ rules: [ {test: /\.txt$/, use: ‘raw-loader‘}， { test: /\.css$/, use: [ { loader: ‘style-loader‘ }, { loader: ‘css-loader‘, options: { modules: true } } ] } ] } }
2）inline
import Styles from ‘style-loader!css-loader?modules!./styles.css‘;
options可以通过query参数形式传递，比如?key=value&foo=bar，或者JSON对象形式，比如?{"key":"value","foo":"bar"}
3) CLI
webpack --module-bind jade-loader --module-bind ‘css=style-loader!css-loader‘
四、Plugins
plugins可以做更多的事情，可以优化和更小化打包文件，或者定义环境变量。
