美文网首页前端H5开发
webpack提取CSS文件

webpack提取CSS文件

作者: 海之深处爱之港湾 | 来源:发表于2019-03-14 18:27 被阅读9次

    提取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).

    相关文章

      网友评论

        本文标题:webpack提取CSS文件

        本文链接:https://www.haomeiwen.com/subject/wkwcmqtx.html