这次给大家带来webpack中单独打包css样式，webpack中单独打包css样式的注意事项有哪些，下面就是实战案例，一起来看一下。
零、介绍
以下是个人项目中总结出来的一些基本知识，记录在这里，加深自己的印象，也让大家能够更快速方便的了解webpack，并且使用它。能力所限，有错误或者问题，请帮忙指出。
webpack 把所有的资源都当成了一个模块, css,image, js 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.
webpack基本的使用很简单，但是要方方面面都讲解的话内容很多，因此这边主要讲解一下 如何使用webpack单独打包css。
至于打包出来，怎么加hash值，怎么替换html中的引用路径，怎么上传到cnd可以使用gulp来实现。【有兴趣后面在写一篇文章】
一、extract-text-webpack-plugin 用法
单独打包css，在webpack需要使用一个插件，extract-text-webpack-plugin
1. 安装extract-text-webpack-plugin
// use npm npm install extract-text-webpack-plugin --save-dev// or use yarn yarn add extract-text-webpack-plugin
2. 配置
加载器里面写好插件的配置（使用什么加载器），在webpack的 plugins 里面设置抽离出来的css文件名叫什么。
var ex = require('extract-text-webpack-plugin');// ...省略module: { loaders: [{  test: /\.less/,  loader: ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出css，这里配置注意下 }]},plugins: [ new ex(【name】.css)]
稍微详细点，可以参考这个《extract-text-webpack-plugin 的使用及安装》
下面放两个实际使用例子，方便大家理解
二、单页面应用，把js里面的css单独打包
打包一个文件，只需要常规的在入口的js文件引用 css文件即可， 打包成多个css文件，可以设置多个css入口，让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。
// webpack 1.x 配置  【早期使用的配置，那时候是1.x】/*  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: './index.js',  output: {   filename: 'index.js'  },  module: {   loaders: [{    test: /\.less/,    loader: ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出css，这里配置注意下   }]  },  plugins: [   new ex(【name】.css)  ] }
三、webpack如何打包多个css文件
2. 配置文件添加对应配置
下面直接提供一个完成的多入口css打包配置
// webpack 3.x 的配置var path = require('path')var glob = require('globby') var webpack = require('webpack')var extracttextplugin = require('extract-text-webpack-plugin')// css入口配置var css_path = { css: {  pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],  src: path.join(__dirname, 'src'),  dst: path.resolve(__dirname, 'static/build/webpack'), }}// 遍历除所有需要打包的css文件路径function getcssentries(config) { var filelist = glob.sync(config.pattern) return filelist.reduce(function (previous, current) {  var filepath = path.parse(path.relative(config.src, current))  var withoutsuffix = path.join(filepath.dir, filepath.name)  previous[withoutsuffix] = path.resolve(__dirname, current)  return previous }, {})}module.exports = [ {  devtool: 'cheap-module-eval-source-map',  context: path.resolve(__dirname),  entry: getcssentries(css_path.css),  output: {   path: css_path.css.dst,   filename: '[name].css'  },  module: {   rules: [    {     test: /\.less$/,     use: extracttextplugin.extract({      use: ['css-loader', 'postcss-loader', 'less-loader']     })    }   ]  },  resolve: {   extensions: ['.less']  },  plugins: [   new extracttextplugin('[name].css'),  ] },// 如果还需要打包js，则可以在这里增加一个单独打包js的处理【根据自己需求来】// {//  entry:{},//  output:{},//  ... 省略// }]
可能有同学还在使用webpack1.x,所以这里在贴一下webpack1.x 的简单配置
// webpack 1.x 版本// ...其他配置和webpack3.x一样module: {  loaders: [    {      test: /\.less$/,      loader: extracttextplugin.extract(style-loader,css-loader,postcss-loader,less-loader)    },  ]}plugins: [ new extracttextplugin('[name].css'),]// ...其他配置和webpack3.x一样
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue+php处理跨域问题
apply+math.max()函数使用
以上就是webpack中单独打包css样式的详细内容。