webpack原理及使用解析

共计 628 个字符，预计需要花费 2 分钟才能阅读完成。

webpack 是 JavaScript 前端静态资源打包器（module bundler）。
首先安装 webpack（可以全局安装，也可以局部安装）
全局：cnpm install -g webpack
局部：cnpm install –save-dev webpack

创建 package.json 文件（NPM 的标准说明文件，包含项目的基本信息、模块依赖、运行的脚本信息）
cnpm init（执行时，需要数据项目的相关信息，可跳过）
cnpm init -y（全都默认）

创建 webpack.config.js 文件（webpack 的配置文件，需手动创建，可在任何位置，一般在整个文件夹的首层子目录）
一个简单的 webpack.config.js 配置：
module.exports = {
entry: __dirname + “/src/main.js”,// 已多次提及的唯一入口文件
output: {
path: __dirname + “/public”,// 打包后的文件存放的地方
filename: “bundle.js”// 打包后输出文件的文件名
}
}

入口文件 main.js（作为入口文件，里面写入需要依赖的模块。。。链式依赖）
一个简单的 main.js 文件：
const greeter = require(‘./Greeter.js’);//main.js 依赖的模块，Greeter.js 依次链式依赖下去
document.querySelector(“#root”).appendChild(greeter());