这次给大家带来webpack中怎样抽离css样式，webpack中抽离css样式注意事项有哪些，下面就是实战案例，一起来看一下。
npm install extract-text-webpack-plugin --save-dev# for webpack 2npm install --save-dev extract-text-webpack-plugin# for webpack 1npm install --save-dev extract-text-webpack-plugin@1.0.1
首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webpack.config.js中引入该插件
const extracttextplugin = require(extract-text-webpack-plugin);module.exports = { module: {  rules: [   {    test: /\.css$/,    use: extracttextplugin.extract({     fallback: style-loader,     use: css-loader    })   }  ] }, plugins: [  new extracttextplugin(styles.css), ]}
const extracttextplugin = require('extract-text-webpack-plugin');// create multiple instances const extractcss = new extracttextplugin('stylesheets/[name]-one.css');const extractless = new extracttextplugin('stylesheets/[name]-two.css');module.exports = { module: {  rules: [   {    test: /\.css$/,    use: extractcss.extract([ 'css-loader', 'postcss-loader' ])   },   {    test: /\.less$/i,    use: extractless.extract([ 'css-loader', 'less-loader' ])   },  ] }, plugins: [  extractcss,  extractless ]};
该插件有三个参数意义分别如下
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
eltablecolumn如何自定义内容
小程序开发分享页面后返回首页
以上就是webpack中怎样抽离css样式的详细内容。