webpack + vue之抽离css方法
2017-05-16 16:35
302 查看
大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。官方给的vue-loader的文档里面有这样的描述
OK,这样打包后,我们把每个entry里面使用到的css代码都单独打包出来了,这时候可以选择
使用html-webpack-plugin生成带css 链接的html,也可以使用html-webpack-inline-source-
plugin把css内联到html里面(减少请求数量,在移动端很有用)
然而会发现,异步引入的vue文件里面import的css,也会被抽离出来,打包内联到html里面,
怎么解决这个问题呢。其实很简单,就是使用loader的include参数,指定loader的作用文件夹,
对不想抽离css的文件,使用style-loader和css-loader。就像这样
这里配置对page目录下的代码,抽离出css,对components里面引用的代码,内联在js里面。
这样异步加载components的css就不会被打包到首屏的html里面了,页面体积减少,加载速度自然
就上去了。
module: { rules: [ { //处理js中引入的css test: /\.css$/, loader: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.vue$/, loader: 'vue-loader', options: {loaders:{ css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) }} } ] }, plugins: [ //这个不添加allChunks参数的话,不会抽离chunk的css new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true}) ]
OK,这样打包后,我们把每个entry里面使用到的css代码都单独打包出来了,这时候可以选择
使用html-webpack-plugin生成带css 链接的html,也可以使用html-webpack-inline-source-
plugin把css内联到html里面(减少请求数量,在移动端很有用)
然而会发现,异步引入的vue文件里面import的css,也会被抽离出来,打包内联到html里面,
怎么解决这个问题呢。其实很简单,就是使用loader的include参数,指定loader的作用文件夹,
对不想抽离css的文件,使用style-loader和css-loader。就像这样
module: { rules: [ { test: /\.css$/, include: [path.resolve(__dirname, "../src/page/"), loader: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.css$/, include: path.resolve(__dirname, "../src/components/"), loader: ['style-loader','css-loader'] }, { test: /\.vue$/, loader: 'vue-loader', options: {loaders:{ css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) }} } ] }, plugins: [ //这个不添加allChunks参数的话,不会抽离chunk的css new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true}) ]
这里配置对page目录下的代码,抽离出css,对components里面引用的代码,内联在js里面。
这样异步加载components的css就不会被打包到首屏的html里面了,页面体积减少,加载速度自然
就上去了。
相关文章推荐
- 详解webpack打包vue时提取css
- 详解vue-cli + webpack 多页面实例配置优化方法
- Vue工程模板文件 webpack打包配置方法
- 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
- Webpack打包css后z-index被重新计算的解决方法,webpackz-index
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
- nodejs 升级后, vue+webpack 项目 node-sass 报错的解决方法
- vue+webpack解决css引用图片打包后找不到资源文件的问题
- vue按需加载组件webpack require.ensure的方法
- Vue+Webpack配置css-loader时报错:Module build failed: Unknown word
- Webpack打包css后z-index被重新计算的解决方法
- 快速将Vue项目升级到webpack3的方法步骤
- webpack2.X提取Vue文件中的css、less或者sass样式
- vue-cli + webpack 新建项目出错的解决方法
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- 浅谈vue+webpack项目调试方法
- webpack处理 css\less\sass 样式的方法
- 浅谈vue+webpack项目调试方法步骤
- vue学习 - webpack (初步)手动配置方法
- vue-cli webpack 引入jquery的方法