webpack 概念：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
四个核心概念：入口(entry) 、输出(output)、loader 和插件(plugins)
webpack 配置文件详情：
基本安装
1.创建一个空目录，初始化 npm，然后在本地安装 webpack 和 webpack-cli（此工具用于在命令行中运行 webpack）
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
2.webpack 安装完成后初步调整当前的目录结构大致如下
(1).调整 package.json 文件,增加 private，并且移除 main 入口，以便确保我们安装包是私有的，防止意外发布你的代码。
同时，考虑到用 CLI 方式来运行本地的 webpack 不是特别方便，我们可以在 package.json 添加一个 npm 脚本(npm script),通过执行 npm run build 命令，来替代 webpack 的 npx 命令。
(2).webpack.config.js 为 webpack 配置文件，目前的配置主要涉及入口文件路径和打包后文件的存放路径
const path = require('path');
module.exports = {
entry: './src/index.js',// 唯一入口文件
output: {
filename: 'bundle.js',// 打包后输出文件的文件名
path: path.resolve(__dirname, 'dist') // 打包后的文件存放的地方
}
};
(3).在入口文件的 js 中写入当前业务逻辑，此处为了便与展示将在页面中生成 hello webpack.
function component() {
<!--创建div标签-->
var element = document.createElement('div');
<!--向标签内填充文字-->
element.innerHTML = 'Hello webpack';
return element;
}
<!--添加到当前页面中-->
document.body.appendChild(component());
(4).在打包后的 dist 文件中的 index.html 中引入打包后的 js 文件,文件名同 webpack.config.js 中配置的文件名。
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<!--引入当前路径下打包生成的js文件-->
<script src="./bundle.js"></script>
</body>
</html>
3.在命令行中执行
npm run build
此时在 dist 文件夹中自动生成 bundle.js 文件，打开路径下的 index.html 页面展示 hello webpack。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于