工程化项目的总结

基本的操作并不难，主要遇到了webpack版本不同而引起的问题。

1. 第一个是压缩插件webpack.optimize.UglifyJsPlugin，这个查了好久才发现，在4以上的版本中已经不支持这个插件，有更简便的方法，通过设置mode属性值，diveplomen代表开发环境，不压缩代码，production代表生产环境，压缩代码，

module.exports = {
    mode: 'production',
}

2. 当用extract-text-webpack-plugin插件分享出css文件时，一定要在将css文件的依赖也写进去。并且，分离之后并不会压缩css文件，需要用到OptimizeCssAssetsPlugin插件，才可以压缩。

new OptimizeCssAssetsPlugin({
            // assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', {
                    discardComments: {
                        removeAll: true
                    }
                }],
            },
            canPrint: true
        }),

3. 开启本地服务器的时候，由于版本问题，需要先下载webpack-cli插件
4. 唯一有疑问的一点时，当同时使用了clean-webpack-plugin时，用webpack命令构建完成时，会生成dist目录，但是，当启用webpack-dev-server时，dist目录又消失，查了一下，看到这样的说法启动webpack-dev-server，相应的代码会读进内存，不会在当前目录下产生dist文件夹。，不知是否正确
5. 最后，用的最长时间的是Gitlab Pages的使用，结合https://blog.csdn.net/Hoshea_chx/article/details/78826689 https://www.cnblogs.com/visugar/p/6821777.html这两篇文章最终成功搭建起来了。最后将压缩好的dist文件夹下的内容放到public文件夹下即可