手摸手：webpack 3秒打包一个three.js项目（有物证）

关于 webpack 相关的文章太多了，何不一起从零开始手写一个配置呢？

真的3秒能打包一个three.js项目吗？真的，后面会提供源文件地址哦。

要打包的项目是这个样子的。

从零开始

关于 three.js 的安装和使用部分都省略。

首先是最基础的。我们需要安装

1. cross-env 目前最流行的运行跨平台设置和使用环境变量的脚本
2. webpack + webpack-cli + webpack-dev-server：三'贱'客，项目必备

参考常规webpack配置结构需要3个最基础文件：

1. webpack 基础配置文件，暂命名为 webpack.base.js
2. webpack 开发配置文件，暂命名为 webpack.dev.js
3. webpack 打包配置文件，暂命名为 webpack.prod.js

当然，需要把 dev 或 prod 中的配置和 base 的配置合并起来，安装个webpack-merge 吧。

然后配置一下最熟悉的脚本运行环节吧。通过--config来对标配置文件，通cross-env 设置环境变量

"dev": "cross-env NODE_ENV=dev webpack-dev-server --config script/webpack.dev.js",
"build": "cross-env NODE_ENV=prod webpack --config script/webpack.prod.js"
复制代码

好的，初期准备工作都OK开始配置环节。

开始配置

首先是webpack的出入口。出口设置为 dist 环节简单直接上代码。

  {
    entry: './src/index.js',
    output: {
      filename: '[name].[hash:8].js',
      path: rootResolve('dist'),
      publicPath: '/'
    },
  }
复制代码

顺便配置下别名。依然可以直接上代码

  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '&