Webapck项目开发基本构建及配置-CFANZ编程社区

1、创建项目文件夹 myapp

手动创建myapp，或mkdir myapp

2、cd myapp

3、npm init （初始化项目）

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

可以在此步骤中填写一些项目信息，也可以在第5步骤完成后填写

5、以上步骤结束，myapp文件夹中创建了package.json文件

package.json文件：

{
  "name": "myapp",//项目名称
  "version": "1.0.0",//项目版本号
  "description": "startApp about books",//项目说明描述
  "main": "index.js",//主文件（入口文件）
  "scripts": {//指定一系列指令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ada",//作者
  "license": "ISC"//许可证
}

package.json文件是关于配置的一些说明，包括：

展示项目npm所依赖的包
项目的基本信息

6、npm install webpack --save-dev（安装webpack）

使用了 --save-dev 表示在开发环境中使用

安装完webapck会创建一个node_modules 文件夹，用来存放npm命令安装的软件，同时package.json 文件会记录该项目的元信息，以及一些依赖包信息等。

*注意：当前练习使用3版本webpack，4版本需要安装webpack-cli

7、创建页面文件index.html和入口文件index.js

创建一个index.html存放页面内容，放到 dist/ 目录下，创建一个index.js入口文件，放到 src/ 目录下。目录结构大概如下：

├── dist
│   └── index.html
├── node_modules
├── package.json
└── src
    └── index.js

PS: 所谓入口文件就是从这个文件中引入的资源都会被Webpack统一打包处理，无论它是图片资源，样式资源，还是JS资源。Webpack会根据配置对不同类型的资源文件进行不同方式的处理。

8、在根目录下创建 webpack.config.js 文件

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

webpack.config.js文件内容大致如下：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve( __dirname , 'dist' )
    }
}

9、运行命令 webpack

在窗口输入 webpack 回车，则编译并打包相应的文件，当前的目录结构大致如下：

.
├── dist
│   ├── bundle.js
│   └── index.html
├── node_modules
├── package.json
├── src
│   └── index.js
└── webpack.config.js

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

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script src="bundle.js"></script>
</body>
</html>

*注意：以上10个步骤结束，一个基本的项目已经构建完成

11、让页面自动刷新

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

12、简单配置一下webpack.config.js文件，加上下面配置

module.exports = {

    .....
    devServer: {
        contentBase: './dist',
        watchContentBase: true
    },
};

13、运行指令： webpack-dev-server

*注意：完成以上步骤后，就可以进行基本的开发了，修改文件可实现页面自动刷新，之后有需要什么依赖和加载器可以按需安装并配置即可