V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
de6ugger
V2EX  ›  webpack

关于 webpack-dev-server 的配置问题

  •  
  •   de6ugger · 2017-08-16 16:35:23 +08:00 · 6085 次点击
    这是一个创建于 2633 天前的主题,其中的信息可能已经有所发展或是发生改变。

    直接用的最新的 iview 项目。

    先执行 npm run dist 生成了 dist 文件夹,

    然后想通过 npm run dev 查看 example 中的效果,

    结果 css 死活找不到,index.html 中的 css 指向自己修改过,

    应该是和 webpack-dev-server 的配置有关的吧?

    前端小菜前来请大佬们帮我指导一下。 不胜感激。

    11 条回复    2017-08-18 14:30:44 +08:00
    de6ugger
        1
    de6ugger  
    OP
       2017-08-16 17:58:50 +08:00
    江湖告急 %>_<%
    Trim21
        2
    Trim21  
       2017-08-16 18:16:16 +08:00 via Android   ❤️ 1
    css 是会自动引入的吧,不需要在手动引入了
    Trim21
        3
    Trim21  
       2017-08-16 18:21:16 +08:00 via Android
    如果你是想引入 iview 的 css 的话,直接在 main.js 里面 import
    de6ugger
        4
    de6ugger  
    OP
       2017-08-16 19:09:53 +08:00
    @Trim21 感谢大兄弟。

    发现构建后的 main.js 中的确会带 css 样式。

    是 main.js 中 import iView from '../src/index'; 这句话,起的作用吧?

    webpack 我需要好好补补课了。
    Trim21
        5
    Trim21  
       2017-08-16 19:43:25 +08:00   ❤️ 1
    emmmm
    这两个应该不是同一个 css
    我觉得你需要的应该是`import 'iview/dist/styles/iview.css';`
    main.js 里面带的 css 是你组件中写的 css
    de6ugger
        6
    de6ugger  
    OP
       2017-08-17 16:54:13 +08:00
    @Trim21 真如你说的,css 是 example 文件夹中的组件中带过去的。

    但是他用了 webpack-dev-server 这个后,我不知道该如何把我外部的文件引入进去的,不管哪个姿势都是路径找不到。
    de6ugger
        7
    de6ugger  
    OP
       2017-08-17 18:28:39 +08:00
    @Trim21 还有一个问题。

    我自己仿着写他的组件库,文件结构也是完全一直的,先在 src 写了一个简单的小组件,然后在创建 example 去调用这个组件,查看效果。结果

    src 文件夹的 index.js 中
    if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
    }

    window.Vue 一直是 undefined 的,执行不了组件的安装。

    另外 index.js 的 module.exports 还一直报错:Cannot assign to read only property 'exports' of object '#<Object>'

    @Aresn 大神,如果有时间指导一下吧,你开个小课程也行啊%>_<%
    Trim21
        8
    Trim21  
       2017-08-17 19:11:00 +08:00   ❤️ 1
    @de6ugger 在 main.js 中直接 import 'iview/dist/styles/iview.css'就能直接引入外部 css 了....这是 iview 在 npm 的页面上写的

    = =至于 install,我就不知道了,我也没用过 iview

    最后一个,改写成 export default { balabala }
    de6ugger
        9
    de6ugger  
    OP
       2017-08-18 13:41:14 +08:00
    @Trim21 感谢你的热心赐教。install 的是我代码的问题,导致没执行上。

    另一个问题就是:
    webpack 可以使用 require 和 export,但是不能混合使用 import 和 module.exports 不然会报错 Cannot assign to read only property 'exports' of object '#<Object>'

    虽然我修改成 export default {}这个形式 OK 了,但是真心很想知道 iview 中是如何实现这个的共存的呢?

    webpack 中还没找到玄机。%>_<%
    @Aresn 大神,满足一下我的好奇心吧。

    ![iview]( https://i.loli.net/2017/08/18/59967dd3239c0.png)
    Trim21
        10
    Trim21  
       2017-08-18 14:30:24 +08:00 via Android
    这个应该修改 babel
    Trim21
        11
    Trim21  
       2017-08-18 14:30:44 +08:00 via Android
    手滑了…这个应该是跟 babel 里面相关的设置有关
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1230 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 110ms · UTC 23:12 · PVG 07:12 · LAX 16:12 · JFK 19:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.