內容導讀

在 webpack 打包 vue 項目時，如果將組件引用的 css 文件打包進 js ，無疑會造成 js 文件太大使頁面打開速度降低。通過對 webpack 配置文件的設置，可以在打包時將 css 文件分離出 js 文件。

在 webpack 打包 vue 項目時，如果將組件引用的 css 文件打包進 js ，無疑會造成 js 文件太大使頁面打開速度降低。通過對 webpack 配置文件的設置，可以在打包時將 css 文件分離出 js 文件。步驟如下：

1. 安裝相關插件

 npm install extract-text-webpack-plugin --save-dev

1. 在 webpack 配置文件中引入安裝的插件

const ExtractTextPlugin = require("extract-text-webpack-plugin")

1. 使用插件

 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")] }

1. 外部 css 文件最終會被打包為 style.css
3. NASA 2015-12-27 11-41-04 .jpg

閱讀更多 浮生偷閒 的文章

關鍵字: 引用 打包 技術