Webpack的ExtractTextPlugin将多个css文件分别打包,而不是打包成一个


64x64
匿名 2017-11-02 21:39 579

Vue的入口js里引入了第三方的animate.css和自己写的main.css样式。通过webpack构建打包后,会把这两个css合并成一个,想分成多个文件,该如何sg?  

webpackstructvue 回答问题

2 个解决方案


1
匿名 2017-11-02T21:47:14

一、extract-text-webpack-plugin 使用方法

这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin

1. 安装extract-text-webpack-plugin

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

2. 配置文件添加对应配置

首先require一下

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加 

new ExtractTextPlugin("styles.css"),

 实例:

plugins:  [
      new webpack.optimize.CommonsChunkPlugin('common.js'),
      new ExtractTextPlugin("styles.css"),  
],

modules里面对css的处理修改为 

{
    test: /\.css$/,
     loader:  ExtractTextPlugin.extract("style-loader","css-loader")
},

千万不要重复了,不然会不起作用的

我这里如下:

module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }, { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.less$/, loader: "style!css!less" }, ] },

3. 在引入文件里面添加需要的css,【举例如下】

require('../less/app.less'); require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css'); require('./bower_components/fancybox/source/jquery.fancybox.css');

二、如何把CSS打包成一个文件, 和 把CSS打包成多个文件

打包一个文件,只需要常规的在入口的js文件引用 css文件即可, 打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。

// 使用webpack 打包单独的postcss语法的css文件 /* webpack.config.js */ var precss = require('precss'); var cssnext = require('cssnext'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); var Ex = require('extract-text-webpack-plugin'); module.exports = { entry: './【path】/index.js', /* index.js 里 require('./【name】.css');就好 我在看看文档是不是直接不用引入js文件 */ output: { filename: 'index.js' }, module: { loaders: [{ test: /\.css$/, loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */ }] }, postcss: function() { return [autoprefixer, cssnext, precss, cssnano] }, plugins: [ new Ex("【name】.css") ] } ////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////// // 使用webpack 打包单独的多个postcss语法的css文件 var precss = require('precss'); var cssnext = require('cssnext'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); var Ex = require('extract-text-webpack-plugin'); var webpack = require('webpack'); module.exports = { entry: { ac1: './src/actother.css', ac2: './src/index.css' }, output: { filename: "[name].css" }, module: { loaders: [{ test: /\.css$/, loader: Ex.extract('style-loader', 'css-loader!postcss-loader') }] }, postcss: function() { return [autoprefixer, precss, cssnano, cssnext] }, plugins: [ new Ex('[name].css') ] }

转载:http://www.jianshu.com/p/439764e3eff2


2
匿名 2017-08-07T17:56:11

这个是window操作系统的问题,检查你import文件的路径跟你项目文件路径,大小写是否一致,

如:E:\App\src\views\Home.vue和E:\App\src\views\home.vue的就存home和Home大小写不一致。


评论