webpack学习extract-text-webpack-plugin 单独打包css

webpack单独打包css

1.首先安装extract-text-webpack-plugin

2.在webpack.config.js里面引入
const ExtractPlugin = require(‘extract-text-webpack-plugin’)
3.配置 plugins: [
new HtmlWebpackPlugin(
{
title:‘ToDo’ //自动生成的index.html设置title
}
),
new VueLoaderPlugin(),
new ExtractPlugin(‘css/main.css’) //设置打包生成的css文件目录
],`
4.
{
test: /.styl/,
use: ExtractPlugin.extract({
fallback: ‘style-loader’,// 如果提取失败,就使用style-loader加载到页面
use: [‘css-loader’, ‘stylus-loader’]
})
}
//以styl结尾的css文件 使用插件

使用单独打包 css文件使用link`

<link href="css/main.css" rel="stylesheet"></head>代码片

   {
        test: /\.styl$/,
        // !!!这是打包到 <style></style> 中去了.
        loader: ['style-loader', 'css-loader', 'stylus-loader']
    }

fallback:意思是,如果打包单个文件失败了,就还是利用 style-loader 写入 HTML 文件的 中.
extract-text-webpack-plugin目前版本不支持webpack4。
解决方案: 使用extract-text-webpack-plugin的最新的beta版 npm install extract-text-webpack-plugin@next