webpack提取CSS文件

提取CSS文件

通常以后两种方式：

extract-loader

ExtractTextWebpackPlugin(主流提取css文件)

安装：npm install extract-text-webpack-plugin webpack --save-dev

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

解决方案：

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

  module: {

    rules:[

      {

        test:/\.less$/,

        use:ExtractTextWepackPlugin.extract({

          fallback: {

              // loader:'style-loader'

              // loader:'style-loader/url'

              // loader:'style-loader/useable'

              loader:'style-loader',

              options:{

                // insertInto:'#app',

                singleton:true,

                transform:'./css.transform.js'

              }

          },

          use:[

            {

              loader:'css-loader',

              options:{

                // minimize:true,

                modules:true,

                localIdentName:'[path][name]_[local]_[hash:base64:5]'

              }

              // loader:'file-loader'

            },

            {

              loader:'less-loader'

            }

          ]

        })

      }

    ]

  },

  plugins:[

    new ExtractTextWepackPlugin({

      filename:'[name].min.css',

      allChunks:false //指定一个提取css范围

    })

  ]

}

allChunks：true/false

是否抽取其他附加的 chunks 里的style (默认只会抽取原始的 chunks, 当使用 CommonsChunkPlugin 时, 在 commons chunk 里面也有通过 ExtractTextPlugin.extract 抽取的 chunks, allChunks 必须设置成 true).