阅读 138

Webpack基础配置(一)

初始化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文件,并且引用生成的文件

发布页面后,查看运行结果

链接

下一篇 Webpack基础配置(二)

文章分类
前端
文章标签