1、关闭npm 严格ssl证书检查

npm config set strict-ssl false

2、设置淘宝源：

npm config set registry https://registry.npm.taobao.org

再次查看即可确认源已修改。用新源更新一波package：

npm update

3、安装依赖组件

npm install

4、本地启动

npm run start

5、编译打包文件

npm run bulid

6、打包文件输出地址

    {
      // Compile into js/build.js
      path: path.resolve(process.cwd(), '../bulid'),
      publicPath: '/'
    },
    options.output
  )

path: path.resolve(process.cwd(), '../bulid')
当前打包目录下的 bulid

path: path.resolve(process.cwd(), '../xxx-ui')
当前打包目录的上级 xxx-ui 目录

7、npm清除所有缓存

npm cache clean -f

8、npm安装包时报错npm ERR! Failed at the gifsicle@4.0.1 postinstall

• 问题概述

近日在升级npm安装包imagemin-webpack-plugin和imagemin-mozjpeg时，分别报错npm ERR! Failed at the gifsicle@4.0.1 postinstall script.和npm ERR! Failed at the mozjpeg@7.0.0 postinstall script. 将npm register改为国内淘宝镜像还是无法解决该问题。

image.png

npm安装包报错ERR! Failed at the mozjpeg@7.0.0 postinstall script界面

• 解决方法

经过分析后发现是由于安装这些包时需要安装依赖包，而其中部分依赖包需要从GitHub上下载，而GitHub的资源库DNS有问题，导致这些依赖包无法安装而报错。

找到原因是由于Github DNS的问题。我们再本地host文件中添加以下内容，然后用npm清楚所有缓存（清除命令为：>npm cache clean -f），之后再重新安装就成功了

52.74.223.119     github.com
192.30.253.119    gist.github.com
54.169.195.247    api.github.com
185.199.111.153   assets-cdn.github.com
151.101.76.133    raw.githubusercontent.com
151.101.76.133    gist.githubusercontent.com
151.101.76.133    cloud.githubusercontent.com
151.101.76.133    camo.githubusercontent.com
151.101.76.133    avatars0.githubusercontent.com
151.101.76.133    avatars1.githubusercontent.com
151.101.76.133    avatars2.githubusercontent.com
151.101.76.133    avatars3.githubusercontent.com
151.101.76.133    avatars4.githubusercontent.com
151.101.76.133    avatars5.githubusercontent.com
151.101.76.133    avatars6.githubusercontent.com
151.101.76.133    avatars7.githubusercontent.com
151.101.76.133    avatars8.githubusercontent.com

image.png

清除缓存和包imagemin-mozjpeg安装成功界面

9、pngquant-bin\vendor\pngquant.exe' �����ڲ����ⲿ���Ҳ���ǿ����еij���

image-webpack-loader 插件放在处理顺序的最前面，然后使用其他插件加载图片就能解决了

use: [
  {
    loader: 'image-webpack-loader',
    options: {
      mozjpeg: {
        enabled: false
        // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
        // Try enabling it in your environment by switching the config to:
        // enabled: true,
        // progressive: true,
      },
      gifsicle: {
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      pngquant: {
        quality: '65-90',
        speed: 4
      }
    }
  },
  {
    loader: 'url-loader',
    options: {
      // Inline files smaller than 10 kB
      limit: 10 * 1024
    }
  }
]

10、webpack Entrypoint undefined = index.html

报错：

image.png

module.exports增加配置stats: { children: false }即可解决；

image.png