webpack 打包时分离 vue 引用的 css 文件

在 webpack 打包 vue 项目时,如果将组件引用的 css 文件打包进 js ,无疑会造成 js 文件太大使页面打开速度降低。通过对 webpack 配置文件的设置,可以在打包时将 css 文件分离出 js 文件。步骤如下:

  1. 安装相关插件

     npm install extract-text-webpack-plugin --save-dev
    
  2. 在 webpack 配置文件中引入安装的插件

    const ExtractTextPlugin = require("extract-text-webpack-plugin")
    
  3. 使用插件

           module: {
           rules: [{
             test: /\.vue$/,
             loader: 'vue-loader',
             options: {
                 transformToRequire: {
                     img: 'src',
                     image: 'xlink:href',
                     'source': 'src',
                 },
                 loaders: {
                     css: ExtractTextPlugin.extract({
                         use: 'css-loader',
                         fallback: 'vue-style-loader'
                     })
                 }
             }
         }],
        plugins:[ new ExtractTextPlugin("style.css")]
     }
    

    外部 css 文件最终会被打包为 style.css

    《webpack 打包时分离 vue 引用的 css 文件》 NASA 2015-12-27 11-41-04 .jpg

    原文作者:牛鼻子老邵
    原文地址: https://www.jianshu.com/p/97423a22742d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞