webpack怎么把各个模块的css打包成一个

html-css020

webpack怎么把各个模块的css打包成一个,第1张

webpack把各个模块的css打包成一个方法:

webpack.config.js配置如下

var ExtractTextPlugin = require("extract-text-webpack-plugin")//extract-text-webpack-plugin安装此插件

module:{

loaders:[

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

]

},

plugins:[

new ExtractTextPlugin("css/[name].css")//则会生成一个css文件

]

比如你的js文件中这样引入即可:

import './css/lib/bootstrap.min.css'

import './css/test.css'

第一步:需要安装 postcss , postcss-loader 和 postcss-preset-env 三个包。

第二步:在 webpack.config.js 的 css 的 loader 里配置 postcss-loader 。

第三步:配置 postcss.config.js ,然后配置 postcss-preset-env 插件,用来读取 package.json 文件中的 browserslist 配置。

第四步:在 package.json 文件添加 browserslist ,配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单,引入插件之后,在 plugins 中实例化即可。