webpack4之前的版本使用ExtractTextPlugin方法提取css,
安装cnpm install extract-text-webpack-plugin -D
webpack4和webpack4.x上使用ExtractTextPlugin的话,会报下面的错误
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
如果非要在webpack4上使用ExtractTextPlugin,必须用对应的beta版本
npm install extract-text-webpack-plugin@next
const extractCSS = new ExtractTextPlugin('extractCSS/[name]-one.css');
const extractLESS = new ExtractTextPlugin('extractLESS/[name]-two.css');
module:{
entry:{
index:'./src/script/index.js'
},
output:{
filename:'[name].js',
path:path.resolve(__dirname,'build') // 下面所有文件打包的相对目录
},
rules:[
{
// 将css抽离出来放到build/extractCSS文件夹下
test: /\.css$/,
use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
},
{
// 将src/style文件夹下的less文件转成css,并且抽离出来放到build/extractLESS文件夹下
test:/\.less$/,
include: [path.resolve(__dirname, "src/style")],
use: extractLESS.extract([ 'css-loader', 'less-loader' ])
},
],
plugins: [
extractCSS,
extractLESS,
...
]
}
运行npm run webpack结果:
那么webpack4以及webpack4.x上要怎么抽离css呢?
这时候要使用MiniCssExtractPlugin:
安装cnpm i -D mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack4.x以及之后使用该方法提取css
module:{
entry:{
index:'./src/script/index.js'
},
output:{
filename:'[name].js',
path:path.resolve(__dirname,'build') // 下面所有文件打包的相对目录
},
rules:[
{
test: /\.less$/i,
include: [ path.resolve(__dirname, "src/style")],
use:[
'style-loader',
{loader:MiniCssExtractPlugin.loader,}, // 单独将src/style下的less文件提出类
'css-loader',
'less-loader' // 注意顺序,style-loader,css-loader,less-loader
]
},
...
],
plugins: [
new MiniCssExtractPlugin({ // 抽出css,单独将less提出类,rule中的loader有用到
//类似于webpackOptions.output中相同选项的选项
//所有选项都是可选的
filename: 'style/[name].css', //放在build/style下面,以自己的名字命名
ignoreOrder: false, // 启用以删除有关冲突顺序的警告
}),
...
]
}
结果: