图解WebPack项目开发基本构建及配置

本篇经验将和大师介绍WebPack项目开辟根基构建及设置装备摆设的方式，但愿对大师的工作和进修有所帮忙！

方式/步调

1. 1

   建立项目文件夹 myapp。

   手动建立myapp，或mkdir myapp。

2. 2

   cd myapp

3. 3

   npm init （初始化项目）

4. 4

   一路回车（关于项目信息的填写，可以不写，一路回车即可）

   可以在此步调中填写一些项目信息，也可以在第5步调完当作后填写。

5. 5

   以上步调竣事，myapp文件夹中建立了package.json文件，如下图所示：

   package.json文件是关于设置装备摆设的一些申明，包罗：

   展示项目npm所依靠的包

   项目标根基信息

   
6. 6

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

   
7. 7

   建立页面文件index.html和进口文件index.js

   建立一个index.html存放页面内容，放到 dist/ 目次下，建立一个index.js进口文件，放到 src/ 目次下。目次布局，如下图所示：

   注：所谓进口文件就是从这个文件中引入的资本城市被Webpack同一打包处置，无论它是图片资本，样式资本，仍是JS资本。Webpack会按照设置装备摆设对分歧类型的资本文件进行分歧体例的处置。

   
8. 8

   在根目次下建立 webpack.config.js 文件

   使页面文件index.html和进口文件index.js联系关系

   webpack.config.js文件内容，如下图所示：

   
9. 9

   运行号令 webpack

   在窗口输入 webpack 回车，则编译并打包响应的文件，当前的目次布局，如下图所示：

   
10. 10

    在页面文件index.html引入bundle.js文件即可

    index.html文件，如下图所示：

    注重： 以上10个步调竣事，一个根基的项目已经构建完当作

    
11. 11

    让页面主动刷新

    npm install --save-dev webpack-dev-server

12. 12

    简单设置装备摆设一下webpack.config.js文件，加上下面设置装备摆设，如下图所示：

    
13. 13

    运行指令： webpack-dev-server

    注重： 完当作以上步调后，就可以进行根基的开辟了，点窜文件可实现页面主动刷新，之后有需要什么依靠和加载器可以按需安装并设置装备摆设即可。