内容导读
在 webpack 打包 vue 项目时,如果将组件引用的 css 文件打包进 js ,无疑会造成 js 文件太大使页面打开速度降低。通过对 webpack 配置文件的设置,可以在打包时将 css 文件分离出 js 文件。
在 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
閱讀更多 浮生偷閒 的文章