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

  • 相关阅读:
    AcWing 157. 树形地铁系统 (hash判断树同构)打卡
    AcWing 156. 矩阵 (哈希二维转一维查询)打卡
    AcWing 144. 最长异或值路径 01字典树打卡
    AcWing 143. 最大异或对 01字典树打卡
    AcWing 142. 前缀统计 字典树打卡
    AcWing 139. 回文子串的最大长度 hash打卡
    AcWing 138. 兔子与兔子 hash打卡
    常用C库函数功能及用法
    编程实现C库函数
    C语言面试题5
  • 原文地址:https://www.cnblogs.com/ssszjh/p/9621308.html
Copyright © 2011-2022 走看看