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

webpack 的 Code Splitting 不支持第三方 css 吗?

  •  
  •   cxh116 · 2016-05-12 18:44:10 +08:00 · 6102 次点击
    这是一个创建于 2877 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code 参考此文的 "Split app and vendor code" , 能把 js 文件分离出来,但 css 无效

    我的 webpack 配置

    var webpack = require("webpack");
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = {
      entry: {
        app: "./entry.js",
        vendor: ['bootstrap'],
      },
        output: {
            path: __dirname + "/dist",
            filename: "bundle.js"
        },
        module: {
            loaders: [
            { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
            { test: /\.css$/, loader:  ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            ]
        },
        plugins: [
          new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
          new ExtractTextPlugin("[name].bundle.css", {allChunks: false}),
        ]
    };
    

    能生成 vendor.bundle.js 文件,且文件内容包含 bootstrap . 但没有生成 vendor.bundle.css 文件. 是 extract-text-webpack-plugin 不支持吗?

    想到一种比较笨的办法,就是再建一个 css_entry.js 文件, 在文件里面调用 require('./node_modules/bootstrap/less/bootstrap.less') ,但感觉这个办法有点搓...

    有什么更好解决方案的朋友吗?

    10 条回复    2016-05-13 10:22:48 +08:00
    gucheen
        1
    gucheen  
       2016-05-12 19:38:13 +08:00 via Android   ❤️ 1
    因为 npm 包的 main file 是不会包含 CSS ,因此你这样子的写法 CSS 根本不会算是 vendor
    gucheen
        2
    gucheen  
       2016-05-12 19:39:17 +08:00 via Android
    其实说实话你这样子管理 vendor 还不如写一个 entry
    emric
        3
    emric  
       2016-05-12 20:16:22 +08:00   ❤️ 1
    ['bootstrap', 'bootstrap/less/bootstrap.less']
    surgit
        4
    surgit  
       2016-05-12 20:24:34 +08:00   ❤️ 1
    可以 require.ensure 你的 css. 会把 css 压到分离的 js 里面的
    jame
        5
    jame  
       2016-05-12 22:49:54 +08:00
    把 style-loader 去掉
    starandtina
        6
    starandtina  
       2016-05-13 08:59:58 +08:00 via iPhone
    cxh116
        7
    cxh116  
    OP
       2016-05-13 09:23:57 +08:00
    @gucheen 看一下 bootstrap 的 main 文件,确实不会包含 css 文件,谢谢.


    @emric 这也是种办法,谢谢.


    @surgit 按需加载看起来更好,谢谢.


    @jame 去掉无效.谢谢.


    @starandtina 之前看了,都试了,无效.
    poke707
        8
    poke707  
       2016-05-13 10:11:32 +08:00
    @surgit 我试过 require.ensure 依赖 js 和 css 文件,本来是都 bundle 去一个 chunk 上面去。可是开了 ExtractTextPlugin 之后 css 就去了 extract 出来的那个 css bundle 了(和整个项目的 css 一起)。

    是功能限制还是我方式不对吗?
    jame
        9
    jame  
       2016-05-13 10:19:55 +08:00
    @cxh116 style-loader 的作用就是以内连的方式来加载 css ,你配置中, less 跟 css 都配置了 style-loader ,两个都去掉了吗?
    cxh116
        10
    cxh116  
    OP
       2016-05-13 10:22:48 +08:00
    @jame 都去掉了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5369 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 01:30 · PVG 09:30 · LAX 18:30 · JFK 21:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.