use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径

分类打包工具

单独打包css

vue css单独打包为一个模块。

npm i extract-text-webpack-plugin

1 安装extract-text-webpack-plugin报错

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

原因：

extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

解决办法：

npm install –save-dev extract-text-webpack-plugin@next

会下载到+ extract-text-webpack-plugin@4.0.0-beta.0

————————————————

版权声明：本文为CSDN博主「小bearBear」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_35585701/article/details/81041584

2 

Error: Path variable [contentHash:8] not implemented in this context: styles.[contentHash:8].css

webPack 升级到 4.3.0 导致  

extract-text-webpack-plugin 无法使用

替换成 new ExtractTextPlugin("styles.[md5:contenthash:hex:8].css")

2。postcss-loader autoprefixer 使用步骤

新建 postcss.config.js

const autoprefixer=require('autoprefixer')

module.exports={

plugins:[

autoprefixer()

]

}

配置文件里

 use: ['style-loader', 'css-loader',

            {

                loader: 'postcss-loader',

                options: {

                    sourceMap: true

                }

            },

            'sass-loader'

        ]

package.json

 "browserslist": [

    "defaults",

    "not ie <= 8",

    "last 2 versions",

    "> 1%",

    "iOS >= 7",

    "Android >= 4.0"

  ]

}

extract-text-webpack-plugin包用于把js以外的东西单独打包为静态资源文件

extract-text-webpack-plugin插件

就是把非js代码的text打包成一个静态资源文件。

CSS单独打包分离

    1.为什么？

    浏览器缓存

2.如何做

        extrack-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next
升级extract-text-webpack-plugin为4.0best版本，然后将contentHash改成Hash

vue文件中的样式是没有单独打包的

extract-text-webpack-pluggin:将非javascript文件单独打包的工具

vue设定：在vue-loader处理当中，当组件要显示的时候才加载样式，这样做的好处就是当异步加载组件的时候同时也把样式给加载过来，可以节省流量

css文件抽取分离 npm i extract-text-webpack-plugin

但是webpack4中已经无法使用extract-text-webpack-plugin。

这里对应的地方，可以修改成

 npm install --save-dev mini-css-extract-plugin

和

config.module.rules.push({
    test: /\.styl/,
    use: [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {publicPath: '../'}
     },
     'css-loader',
     {
         loader: 'postcss-loader',
         options: {sourceMap: true}
      },
      'stylus-loader'
      ]
    }
 )

和

config.plugins.push(new MiniCssExtractPlugin({filename: 'style.[contentHash:8].css'}))

使用 Extract-text-webpack-plugin 插件，配置 css 单独分离打包

在生产环境中，单独配置 mogule.rules 选项

config.module.rules(
    {
        test: ExtractPlugin.extract({
            fallback: 'style-loader',
            use: [
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true
                    }
                },
                'stylus-loader'
            ]
        })
    }
)

config.plugins.push(
    new ExtractPlugin('style.[contentHash:8].css')
)

extract-text-webpack-plugin@^3.0.2

extract-text-webpack-plugin   单独打包css文件

一、npm i extract-text-webpack-plugin，把非javascript的文件打包

二、webpack的devserver不能用chunkHash，不然是会报错的。

三、vue-loader处理中，组件中的样式，组件显示的时候，样式才会显示，异步加载组件时，css也异步加载过来。

抽离css 

安装

npm install extract-text-webpack-plugin 把一些非Javascript的东西单独打包

抽离css 

安装

npm install extract-text-webpack-plugin