webpack分离css单独打包

原文地址，欢迎Star！github

webpack分离css单独打包

完整的文章【使用markdown编写，新增单独打包成多个CSS文件】

瞎扯

webpack 把全部的资源都当成了一个模块, CSS,Image, JS 字体文件都是资源, 均可以打包到一个 bundle.js 文件中.
可是有时候须要把样式单独的打包成一个文件, 而后放到 CND上, 而后缓存到浏览器客户端中php

这个操做很简单的，只须要一个插件就行了，就是extract-text-webpack-plugincss

1. 安装extract-text-webpack-plugin

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

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

首先require一下html

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

plugins里面添加前端

new ExtractTextPlugin("styles.css"),

实例：jquery

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

modules里面对css的处理修改成webpack

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

千万不要重复了，否则会不起做用的git

我这里以下：github

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');

您可能还感兴趣web

1. 【简书】【WEBPACK】分离css单独打包

2. 【博客园完整版】webpack分离css单独打包sql

3. 【GITHUB】前端技术文章汇总