图解WebPack项目开发基本构建及配置 _小知识

本篇经验将和大师介绍WebPack项目开辟根基构建及设置装备摆设的方式，但愿对大师的工作和进修有所帮忙！
方式/
1建立项目文件夹 myapp 。
手动建立myapp，或mkdir myapp 。

2cd myapp

3npm init （初始化项目）

4一路回车（关于项目信息的填写，可以不写，一路回车即可）
可以在此
中填写一些项目信息，也可以在第5
完当作后填写。

5以上
竣事， myapp文件夹中建立了package.json文件，如下图所示：
package.json文件是关于设置装备摆设的一些申明，包罗：
展示项目npm所依靠的包
项目标根基信息

文章插图

6npm install webpack --save-dev（安装webpack），如下图所示：

文章插图

7建立页面文件index.html和进口文件index.js
建立一个index.html存放页面内容，放到 dist/ 目次下，建立一个index.js进口文件，放到 src/ 目次下。目次布局，如下图所示：
注：所谓进口文件就是从这个文件中引入的资本城市被Webpack同一打包处置，无论它是图片资本，样式资本，仍是JS资本。 Webpack会按照设置装备摆设对分歧类型的资本文件进行分歧体例的处置。