南风知我意的技术博客

一、环境搭建

1. 基础环境搭建

新建初始化项目

shell

mkdir threejs-map && cd threejs-map
# 初始化package.json 文件
npm init -y

此时的package.json 文件内容如下：

shell

{
  "name": "threejs-map",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

使用 IDEA or VsCode 打开项目工程

安装 webpack and webpack-cli

shell

# 采用 yarn 进行包管理 
yarn add webpack webpack-cli -D

安装完成之后，在package.json 文件中，会多出一个 devDependencies 节点，对应的就是开发环境需要用到的插件。
json
```
{
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }
}
```
新建public目录，用来存放静态资源

新建src/js 和 src/view，分别存放js和页面

在src/js下新建 index.js，入口js

function test() {
  console.log('3D地图示例');
}
test();

在src/view下新建index.html，入口视图

html

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>3D地图</title>
  </head>
  <body>
      <div>3D地图示例</div>
  </body>
</html>

配置webpack
- 新建build目录，将webpack配置大致分为：通用配置、开发环境配置、生产环境配置
  - 新建通用配置webpack-common.js
    - 设置入口
      js
      module.exports = { entry: "./src/js/index.js", }
  - 新建开发环境配置webpack-dev.js
    - 设置开发环境
      js
      const devConfig = { mode: "development" } module.exports = devConfig
  - 新建生产环境配置webpack-prod.js
    - 设置生产环境
      js
      const prodConfig = { mode: "production" } module.exports = prodConfig

2. 配置合并

安装webpack-merge
shell
```
  yarn add webpack-merge -D
```

安装完成

json5

  {
  "devDependencies": {
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-merge": "^5.8.0",
   }
  }

针对webpack.dev.js 和 webpack.prod.js 配置如下：

webpack.dev.js

  const commonConfig = require("./webpack.common");
  const { merge } = require("webpack-merge");
  
  const devConfig = {
    mode: "development"
  }
  module.exports = merge(commonConfig, devConfig);

webpack.prod.js

const commonConfig = require("./webpack.common");
const { merge } = require("webpack-merge");

const prodConfig = {
  mode: "production"
}
module.exports = merge(commonConfig, prodConfig)

3. 视图入口配置

安装html-webpack-plugin

html-webpack-plugin会在打包结束后，⾃动⽣成⼀个 html⽂件，并把打包⽣成的 js 模块引⼊到该 html 中。
shell
```
  yarn add html-webpack-plugin -D
```

安装完成

json5

  {
    "devDependencies": {
      "html-webpack-plugin": "^5.5.0",
      "webpack": "^5.72.1",
      "webpack-cli": "^4.9.2",
      "webpack-merge": "^5.8.0",
    }
  }

配置HtmlWebpackPlugin

在build/webpack.common.js 配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/js/index.js",
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/view/index.html",
      filename: "index.html"
    }),
  ],
}

4. 配置启动脚本

在package.json文件中的script节点下配置

json5

{
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
  }
}

5. 配置`webpack-dev-server`

安装插件
shell
```
yarn add webpack-dev-server -D
```

安装完成的devDependencies

json5

{
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-merge": "^5.8.0",
    "webpack-dev-server": "^4.9.0"
  }
}

在build/webpack-dev.js 文件中配置

const path = require('path');

const devConfig = {
  devServer: {
    static:  {
      directory: path.join(__dirname, './public'),
    },
    open: true,
    port: 8089
  }
}

static是webpack5的静态资源配置目录

运行配置脚本，启动项目
shell
```
  yarn run dev
```
效果

一、环境搭建 ​

1. 基础环境搭建 ​

2. 配置合并 ​

3. 视图入口配置 ​

4. 配置启动脚本 ​

5. 配置webpack-dev-server ​

一、环境搭建

1. 基础环境搭建

2. 配置合并

3. 视图入口配置

4. 配置启动脚本

5. 配置`webpack-dev-server`