关于使用webpack

关于使用webpack

这篇文章只是个人记录，而不是教程啥的，新手朋友们不用浪费时间继续翻了。

使用目的：

由于项目中要涉及到citygml数据向3dtiles的转变，而这个转换用到了一个GitHub上的开源包：citygml-to-3dtiles。而这个包的运行环境是在node环境下，且语法规范为es6标准。因为我的最终目的是要将大规模的城市建筑物在cesium上进行前端的展示，因此我的一个设想是利用webpack和babel将这个包打包为可以在浏览器（browser）端运行的符合es5标准的javascript代码。

先说结果：失败了，（虽然打包成功了，但是运行的时候就会报错）。

学习过程：

学习webpack最重要的是它的配置文件webpack.config.js的设置。我先是跟着几个大佬做了几个小例子，比如有入门 Webpack，看这篇就够了_前端学习笔记 - SegmentFault 思否。然后发现有的没讲到，就跟着打包时的报错信息一步步结合google和webpack的中文官网的文档进行学习。学的比较累，知识也就马马虎虎学了点，算是入门吧。

下面个人学到的一些零碎知识点进行总结，有点班门弄斧了。。。。。。

1、首先是对于npm的一些学习，其中对于npm安装module时可以选择全局安装和局部安装。这里我是以局部安装为例，例如：

//window的控制台下运行
mkdir test
cd test
//这时候就进入test文件夹了
//初始化，直接以全部的yes进行默认初始化，因此加入-y修饰
cnpm init -y
//上一步完事后就会创建一个package.json，包括了各种信息
//之后就可以用npm安装各种module了，不再赘述

2、首先肯定是webpack的安装啥的，这个百度教程比较多，我也是用npm（或者cnpm，npm的淘宝镜像）进行安装的。这里注意的是webpack的版本有了5.x了，但是为了稳妥起见还是选择了4.x的版本。具体使用npm安装指定版本的module时，可以对其进行指定，例如：

//控制台下运行
cnpm install --save-dev webpack@4 webpack-cli

3、安装完之后，手动在根目录 test 下创建一个webpack.config.js文件，这就是webpack的配置文件了。然后就可以对其进行编辑各项内容，具体的在好多教程和官网文档都有详细说明，不再赘述。要说明的一点时，执行webpack打包过程的方式有多种，其中一种为如下：

//package.json文件中
//将默认的scripts选项进行替换为如下：
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run copy:cesium && webpack --mode=production",
  },
//其中的"test"为自带的，"build"为添加的，也就是增加了一个 build  的命令，执行之后的命令。
//然后再看在控制台中如何执行webpack的打包过程

//控制台下的test路径下，对了，webpack.config.js已经配置完了啊！
npm run build

4、这个时候就会执行webpack的打包过程了。如果你是个幸运的人的话，会看到一些绿色的提示后，在你的输出目录有了打包后的代码了，然后还能正常运行，这就是成功了！

只是把我的截图记录下，也是打包成功了，但是有不少警告。（。。。。。。）

到这里也就差不多了，反正还得不断学习。。。。。。