webpack原理及使用解析

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());