使用webpack4打包threejs H5前端项目（webpack+threejs+vscode开发）

背景

    近期学习threejs项目，由于依赖 加载器、渲染器、后期处理等多个js库文件，所以考虑用webpack打包前端项目。

 

分析

    项目文件均为静态文件，包括html、css、js、img、json（3D模型文件）。其中，img和json直接拷贝打包，css和js进行合并压缩处理。

    这里使用vscode IDE编写代码，主要有两个便捷之处，一是方便定位项目目录，二是通过webpack插件自动创建webpack.config.js文件。

    对于webpack及插件的使用，官网有较为详细的说明文档，下面只列出操作步骤。

 

操作步骤

第一步，安装nodejs，下载地址 https://nodejs.org/en/ ，安装完成输入命令查看版本号。

node -v

第二步，初始化项目，生成的默认的package.json。-y省去敲回车的步骤。

npm init -y

第三步，安装webpack及依赖包。

npm install --save-dev webpack

安装样式加载器、css文件加载器、文件加载器。用于处理css、图片文件。

npm install --save-dev style-loader css-loader file-loader

安装提取文件插件。

npm install --save-dev extract-text-webpack-plugin@next

安装压缩css文件插件。

npm install --save-dev optimize-css-assets-webpack-plugin

安装拷贝插件。

npm install --save-dev copy-webpack-plugin

安装html插件。

npm install --save-dev html-webpack-plugin

第四步，新建并修改webpack配置文件webpack.config.js。

const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 提取文件插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css文件插件
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html插件

const path = require('path');
module.exports = {
    mode: 'production', // development production
    entry: path.join(__dirname, '/assets/js/main.js'), // 应用程序入口
    output: { // 输出选项
        path: path.join(__dirname, 'build'), // 输出文件目标路径
        filename: "js/bundle.[chunkhash:8].js", // js文件名chunkhash防缓存
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({ // 提取文件插件配置
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader', // 文件加载器配置
                options: {
                    name: '[name].[ext]',
                    publicPath: '../img', // 自定义public发布目录，用于解决css文件内引用图片路径问题
                    emitFile: false // 设置为不生成文件，直接拷贝图片
                }
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/style.[chunkhash:8].css"), // 初始化提取文件插件，css文件名chunkhash防缓存
        new OptimizeCssAssetsPlugin(), // 初始化压缩css文件插件
        new CopyWebpackPlugin([{ // 初始化配置拷贝插件，把图片目录直接拷贝到目标路径
            from: './assets/img',
            to: 'img'
        }]),
        new HtmlWebpackPlugin({ // 初始化html插件，自动生成<link>和<script>标签
            filename: 'index.html',
            template: path.resolve(__dirname, 'template/index.html')　　// 使用的html模板路径
        })
    ]
};

第五步，最后一步，打包。

webpack

到这里，已经打包完毕。看一下目录结构和package.json文件

{
  "name": "point",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.4",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1"
  }
}

 

BTW

1、第三步可以一次性安装多个依赖包。

npm install --save-dev webpack style-loader css-loader file-loader extract-text-webpack-plugin@next optimize-css-assets-webpack-plugin copy-webpack-plugin html-webpack-plugin

2、如果考虑进一步优化图片打包，可以使用url-loader加载器，图片小于limit限制时会自动转成base64码引用。

3、js文件要在开头引入threejs库及样式文件。

require('./loaders/LegacyJSONLoader.js');
require('./shaders/ConvolutionShader.js');
// ...
require('./postprocessing/EffectComposer.js');
// ...
require('../css/style.css');
// ...

 

参考链接

Plugins | webpack 中文网：https://www.webpackjs.com/plugins/

webpack踩坑之路 (2)——图片的路径与打包：https://www.cnblogs.com/ghost-xyx/p/5812902.html