vue檔案單獨打包css

標籤：ttext   webp   pac   llb   ack   plugin   text   tool   版本   

單獨打包需要使用extract-text-webpack-plugin外掛程式；

我用的[email protected]這個版本，webpack用的webpack2

配置如下:

1.先定義      const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);

2.配置css和less

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback:‘style-loader‘,
        use:‘css-loader‘
    })
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: ‘style-loader‘,
        use:[{
            loader: ‘css-loader‘,
            options: { sourceMap: true, importLoaders: 1 }
        },{
            loader: ‘less-loader‘,
            options: { sourceMap: true }
        }]

    })

},

3.添加plugins

new ExtractTextPlugin(‘css/styles.css‘)

4.記得修改devtool: ‘source-map‘

5.查看是什麼模式，開發模式還是生產模式，生產模式才會打包

 

vue檔案單獨打包css