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默认会在项目根目录下查找weboack.config.js文件，没有weboack.config.js文件则直接将src/index.js当作入口文件进行打包。

输出文件

执行命令后，会在项目根目录下生成dist目录

使用生成文件

在src目录下创建idnex.html文件，并且引用生成的文件

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

链接

下一篇 Webpack基础配置(二)