webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle(包或文件)。
从Webpack4开始可以不用再引入一个配置文件来打包项目，开箱即用，可以无需使用任何配置文件。然而，webpack会假定项目的入口起点为src/index，然后会在dist/main.js输出结果，并且在生产环境开启压缩和优化。通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个webpack.config.js文件，webpack会自动使用它。
Webpack入口(entry)
Webpack入口起点(entry point)指示webpack应该使用哪个模块，来作为构建其内部依赖图(dependency graph)的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认值是 ./src/index.js，如下：
webpack.config.js
module.exports = {
entry: './src/index.js'
};如果在index.js文件中使用任何import导入，Webpack将处理它们。您可以有多个入口点，但是对于单页应用程序，通常只有一个入口点。
Webpack输出(output)
output属性告诉webpack在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
};
运行webpack
cd到当前的项目根目录中，启动终端，npm安装：
npm init -y
npm install webpack当前的项目根目录中将会多出一个node_modules文件夹（文件夹中包含了Webpack），以及两个文件：package.json和package-lock.json。现在打开package.json文件并修改脚本：
"scripts": {
"build": "webpack"
}在项目根目录中新建一个src目录，在src目录下新建一个index.js文件。运行
npm run build将使用node_modules目录中的webpack构建打包，这时您可以看到在dist目录中创建了一个main.js文件。
Webpack多个入口(entry)
如果您想拥有多个入口点，则可以使用对象。
webpack.config.js
module.exports = {
entry: {
first: './src/one.js',
second: './src/two.js',
}
};使用该代码，我们创建了两个入口点。
Webpack输出(output)
webpack.config.js
const path = require('path');
module.exports = {
entry: {
first: './src/one.js',
second: './src/two.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}上面的代码，可以有多个文件作为输出。所有文件现在都有一个不同的名称，如：first.bundle.js和second.bundle.js。
