初始化node项目
执行命令:yarn init -y并生成package.json文件
下载webpack
执行命令:yarn add webpack webpack-cli --dev
在项目根目录创建src文件夹
目录结构如图:
文件内容如图:
注:webpack默认支持AMD、CMD、commonJS、ES6方式模块的导入导出。
webpack命令
直接在终端执行webpack命令,都是全局命令。
在项目根目录下,执行.\node_modules\.bin\webpack命令才是局部命令;
或者在package.json的scripts属性中配置的webpack命令也是局部命令。
如图:
使用webpack命令
在终端执行 .\node_modules.bin\webpack 或者 yarn build命令
webpack默认会在项目根目录下查找webpack.config.js文件,
没有webpack.config.js文件则直接将src/index.js当作入口文件进行打包。
输出文件
执行命令后,会在项目根目录下生成dist目录
使用生成文件
在src目录下创建idnex.html文件,并且引用生成的文件
发布页面后,查看运行结果