webpack原理及使用解析

11次阅读

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

正文完
 0