图解WebPack项目开发基本构建及配置
本篇经验将和大师介绍WebPack项目开辟根基构建及设置装备摆设的方式，但愿对大师的工作和进修有所帮忙！
方式/步调
- 1
建立项目文件夹 myapp。
手动建立myapp，或mkdir myapp。
- 2
cd myapp
- 3
npm init （初始化项目）
- 4
一路回车（关于项目信息的填写，可以不写，一路回车即可）
可以在此步调中填写一些项目信息，也可以在第5步调完当作后填写。
- 5
以上步调竣事，myapp文件夹中建立了package.json文件，如下图所示：
package.json文件是关于设置装备摆设的一些申明，包罗：
展示项目npm所依靠的包
项目标根基信息
- 6
npm install webpack --save-dev（安装webpack），如下图所示：
- 7
建立页面文件index.html和进口文件index.js
建立一个index.html存放页面内容，放到 dist/ 目次下，建立一个index.js进口文件，放到 src/ 目次下。目次布局，如下图所示：
注：所谓进口文件就是从这个文件中引入的资本城市被Webpack同一打包处置，无论它是图片资本，样式资本，仍是JS资本。Webpack会按照设置装备摆设对分歧类型的资本文件进行分歧体例的处置。
- 8
在根目次下建立 webpack.config.js 文件
使页面文件index.html和进口文件index.js联系关系
webpack.config.js文件内容，如下图所示：
- 9
运行号令 webpack
在窗口输入 webpack 回车，则编译并打包响应的文件，当前的目次布局，如下图所示：
- 10
在页面文件index.html引入bundle.js文件即可
index.html文件，如下图所示：
注重： 以上10个步调竣事，一个根基的项目已经构建完当作
- 11
让页面主动刷新
npm install --save-dev webpack-dev-server
- 12
简单设置装备摆设一下webpack.config.js文件，加上下面设置装备摆设，如下图所示：
- 13
运行指令： webpack-dev-server
注重： 完当作以上步调后，就可以进行根基的开辟了，点窜文件可实现页面主动刷新，之后有需要什么依靠和加载器可以按需安装并设置装备摆设即可。
- 发表于 2018-05-06 00:00
- 阅读 ( 822 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章