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改为国内淘宝镜像还是无法解决该问题。
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
清除缓存和包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
报错：
module.exports增加配置stats: { children: false }即可解决；
