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

   
   NASA 2015-12-27 11-41-04 .jpg