zoukankan      html  css  js  c++  java
  • vue-cli的webpack小技巧

    *常用技巧,如果是用vue-cli脚手架创建的项目
    1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ,
    打包后文件体积可以减少百分之八十,是因为把.map文件给去掉了

    map文件的作用在于:项目打包后,代码都是经过压缩加密的,

    如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
    有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。

    在上线项目的时候,打包的时候,防止图片字体找不到url,css,js路径错误:
    1.修改config下面的index.js中bulid模块导出的路径:assetsPublicPath: './',

    记住是build的,不是dev的

    2.修改build文件夹下边的utils.js文件,if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    //此处添加publicPath:'../../'
    publicPath:'../../'
    ....

    3.当使用在assets文件下的图片资源时,因为src下的文件都要打包,所以引用图片的时候写法是这样的:

    因为打包的时候,webpack要对src的文件做处理

    而使用static下的图片资源时,建议别用相对路径,用绝对路径,不然你打包会有问题或者组件引用图片时,会出现路径问题404

    总结就是:static目录本来就是用来放静态资源的(要用绝对地址),不会对其打包webpack;

    assets目录的资源一定要require()或者import引入才可以的(要用相对地址),这样webpack才会把文件放到资源图谱里面进行加载,会对其打包

    devDependencies里面的插件只用于开发环境,不用于生产环境,即辅助作用,打包的时候需要,打包完成就不需要了。
    而dependencies是需要发布到生产环境的,自始至终都在。
    比如wepack等只是在开发中使用的包就写入到devDependencies,
    而像vue这种项目全程依赖的包要写入到devdependencies

  • 相关阅读:
    一次郁闷的项目部署经历
    一道面试题的求解
    一次惨痛的教训
    小地方,大郁闷001
    WPF相对资源的访问
    VS2008安装时提示磁盘空间不够的解决办法
    WPFSlider 控件的使用
    关于asp.net大文件上传和进度条实现的学习(1)
    DataList的一次分页困惑
    关于android的XML的解析
  • 原文地址:https://www.cnblogs.com/ssszjh/p/9621308.html
Copyright © 2011-2022 走看看