在 webpack 打包 vue 项目时，如果将组件引用的 css 文件打包进 js ，无疑会造成 js 文件太大使页面打开速度降低。通过对 webpack 配置文件的设置，可以在打包时将 css 文件分离出 js 文件。步骤如下：
-
安装相关插件
npm install extract-text-webpack-plugin --save-dev -
在 webpack 配置文件中引入安装的插件
const ExtractTextPlugin = require("extract-text-webpack-plugin") -
使用插件
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
