webpack分离css单独打包

摘要:webpack分离css单独打包...

作者:LoveCode标签:webpack,css,打包

一、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')
  ]
}


CopyRight © 2017 荒山本的官方网站 粤ICP备16049175号 All Right Service 网站地图(xml) 网站地图(html)